Menu
MenuButton is a button with a trailing chevron that opens a Menu of options.
Takes every Button prop plus
menu (the MenuPopover content). The chevron rotates 180° while the menu is open (data-[state=open]), and the button keeps its pressed color. Unlike SplitButton, the whole button only opens the menu; there is no default action.Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { MenuButton, MenuItem } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Appearance
primary, secondary (default), outline, subtle, transparent.
Size
small, medium, large.
Icon-only, menuIcon & disabled
Without a label, the button shrinks to the icon and chevron (it needs an aria-label). menuIcon replaces the default chevron.
Menu closed
Controlled open state
open / onOpenChange to keep it in sync with outside state.
Usage
Do
- The label names the group of options (Sort, Export, View…).
- Use it when the options are equal and none of them is the default.
- Icon-only buttons always have an aria-label.
Don't
- Don't use it when there is a clear default action. Use SplitButton.
- Don't put complex forms in the menu. Use Popover.
Props
| Prop · Type | Default | Description |
|---|---|---|
| menuReactNode | Default: — | MenuPopover content: MenuItem, MenuItemRadio, MenuDivider… |
| menuIconReactNode | Default: <ChevronDown20Regular /> | Trailing icon; rotates 180° when the menu opens. |
| open / defaultOpen / onOpenChangeboolean / (open: boolean) => void | Default: — | Controls the menu state. |
| align"start" | "center" | "end" | Default: "start" | Menu alignment relative to the button. |
| appearance / size / shape / icon / disabled…ButtonProps | Default: — | Passed to the inner Button. |