Patterns

Tooltip · Dropdown

Tooltip: ink-on-light pill, 6px padding, fade-up entrance. Dropdown: anchored glass menu with items, separators, optional labels and kbd shortcuts.

installnpx shadcn@latest add https://br-design-system2.vercel.app/r/br-primitives.json

Preview

Save changes⌘SNew project⌘N

import { Tooltip, Dropdown, Button, Avatar } from "@/components/br/primitives";

<Tooltip label="Save changes" kbd="⌘S">
  <Button variant="ghost"><Download size={14} /></Button>
</Tooltip>

<Dropdown
  trigger={<Button variant="ghost">Sort by</Button>}
  items={[
    { text: "Newest first", kbd: "⌥1", icon: <Sort size={14} /> },
    { sep: true },
    { text: "Configure…", icon: <Settings size={14} /> },
  ]}
/>

Props

Prop	Type	Default	Description
Tooltip.label	ReactNode	—	The tooltip text.
Tooltip.kbd	ReactNode	—	Optional kbd hint, dimmed at 55%.
Dropdown.trigger	ReactNode	—	Click target.
Dropdown.items	MenuItem[]	—	[{ text, icon, kbd, onClick }] \| { sep: true } \| { label }
Dropdown.align	"start" \| "end"	"start"	Menu alignment relative to trigger.