MenuButton

A button that opens an anchored action menu of one-shot commands

Category: navigation · WCAG 2.2-AA · navigation, menu, actions, dropdown, floating

Variants

primary
secondary
ghost

Sizes

States

open
closed

Props

Prop	Type	Default	Description
`label`	`ReactNode`	—	Trigger button content
`items`	`MenuButtonItem[]`	—	Action items: { id, label, onSelect?, disabled? }
`variant`	`'primary' \| 'secondary' \| 'ghost'`	`'secondary'`	Trigger visual variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Trigger size
`disabled`	`boolean`	`false`	Disables the trigger
`align`	`'start' \| 'end'`	`'start'`	Aligns the menu to the start or end edge of the trigger
`labels`	`{ open?: string }`	—	Override the trigger accessible name

Design tokens

--cascivo-color-primary
--cascivo-color-primary-fg
--cascivo-color-primary-hover
--cascivo-color-surface
--cascivo-color-border
--cascivo-color-text
--cascivo-color-bg-subtle
--cascivo-radius-control
--cascivo-radius-overlay
--cascivo-radius-item
--cascivo-shadow-md
--cascivo-focus-ring
--cascivo-motion-enter
--cascivo-z-dropdown

When to use

Exposing a small set of one-shot actions behind a single labeled button
Toolbar or header overflow actions where each item runs a command on activation
Action lists that need ArrowUp/ArrowDown roving focus and Enter/Space activation

When not to use

Choosing and persisting a value from options — use Select
Right-click contextual actions on a target element — use ContextMenu
A single action with no list — use a plain Button
Rich interactive content (forms, pickers) rather than a list of commands — use Popover

How to build an accessible MenuButton in React →

Examples

Basic action menu

A secondary button that opens a list of actions

<MenuButton
  label="Actions"
  items={[
    { id: 'edit', label: 'Edit', onSelect: () => edit() },
    { id: 'duplicate', label: 'Duplicate', onSelect: () => duplicate() },
    { id: 'delete', label: 'Delete', onSelect: () => remove(), disabled: !canDelete },
  ]}
/>

End-aligned, primary

Aligns the menu to the trigger end edge

<MenuButton
  label="Create"
  variant="primary"
  align="end"
  items={[
    { id: 'doc', label: 'New document', onSelect: createDoc },
    { id: 'folder', label: 'New folder', onSelect: createFolder },
  ]}
/>

Related components

Menu — Use Menu for fully composable trigger + item children; MenuButton is the prop-driven convenience form
ContextMenu — Use ContextMenu when actions are triggered by right-click on a target rather than a button
Select — Use Select when the user is picking a value instead of firing an action
Button — The trigger is a styled button that opens the menu

← Back to docs