Button Menu
Button Menu is a trigger button that opens a menu of related actions when activated.
Loading preview…
1
<div className="flex gap-2">2
<ButtonMenu variant="primary" size="sm" leadingIcon={<PlusIcon />}>Insert</ButtonMenu>3
<ButtonMenu variant="secondary-outline" size="sm" leadingIcon={<ClockIcon />}>History</ButtonMenu>4
</div>Installation
npx sdaia-ui@latest add buttonmenu
Usage
import { Button } from "@/components/ui/button"import { Button } from "@/components/ui/button"Examples
Default
The default button close style.
Loading preview…
1
<div className="flex flex-wrap gap-4 items-center">2
<ButtonMenu variant="neutral" size="lg" leadingIcon={<Icon />}>Button</ButtonMenu>3
<ButtonMenu variant="primary" size="lg" leadingIcon={<Icon />}>Button</ButtonMenu>4
<ButtonMenu variant="secondary-solid" size="lg" leadingIcon={<Icon />}>Button</ButtonMenu>5
<ButtonMenu variant="secondary-outline" size="lg" leadingIcon={<Icon />}>Button</ButtonMenu>Size
Use the `size` prop to change the size of the button menu.
Loading preview…
1
<div className="flex flex-wrap gap-4 items-center">2
<ButtonMenu variant="primary" size="lg" leadingIcon={<Icon />}>Large</ButtonMenu>3
<ButtonMenu variant="primary" size="md" leadingIcon={<Icon />}>Medium</ButtonMenu>4
<ButtonMenu variant="primary" size="sm" leadingIcon={<Icon />}>Small</ButtonMenu>5
</div>Icon Only
Use the `iconOnly` prop to change the layout of the button menu.
Loading preview…
1
<div className="flex flex-wrap gap-4 items-center">2
<ButtonMenu variant="neutral" size="lg" iconOnly leadingIcon={<Icon />} aria-label="Menu" />3
<ButtonMenu variant="primary" size="lg" iconOnly leadingIcon={<Icon />} aria-label="Menu" />4
<ButtonMenu variant="secondary-solid" size="lg" iconOnly leadingIcon={<Icon />} aria-label="Menu" />5
<ButtonMenu variant="secondary-outline" size="lg" iconOnly leadingIcon={<Icon />} aria-label="Menu" />API Reference
Button Menu Props
Props for the Button Menu component.
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'neutral' | 'primary' | 'secondary-solid' | 'secondary-outline' | 'subtle' | 'transparent' | 'neutral' | optional |
size | 'sm' | 'md' | 'lg' | 'md' | optional |
leadingIcon | ReactNode | — | optional |
iconOnly | boolean | — | optional |
disabled | boolean | — | optional |
selected | boolean | — | optional |
fullWidth | boolean | — | optional |
dir | 'ltr' | 'rtl' | — | optional |
as | ElementType | — | optional |
children | ReactNode | — | optional |