Dropdown Button
A pill trigger on top of the shadcn dropdown menu, with a ChatGPT-style rounded menu, split-button mode and item descriptions.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { DropdownButton } from '@/components/component-kit/items/dropdown-button';
export function Example() { return ( <DropdownButton label="Deploy" split onAction={() => console.log('deploy')} items={[ { id: 'prod', label: 'Deploy to production', shortcut: '⌘⏎' }, { id: 'preview', label: 'Deploy a preview' }, { id: 'sep', type: 'separator' }, { id: 'cancel', label: 'Cancel deployment', destructive: true }, ]} /> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | The trigger label. |
items | DropdownButtonItem[] | — | Menu rows: items with optional icon, description, shortcut and destructive styling, plus separators and labels. |
split | boolean | false | Make the label its own action and open the menu from the chevron only. |
variant | "default" | "outline" | "secondary" | "ghost" | default | Any shadcn button variant for the pill. |
size | "sm" | "default" | "lg" | default | Pill height: 28, 32 or 36px. |
align | "start" | "center" | "end" | start | Menu alignment against the trigger. |