The MenuButton component is a Button that will open up a Menu.

For more information on how to use the features and props for this component, check out the developer documentation.

Each MenuButton expects text that will render within a Button. This component accepts the same visual variants as the Button component, and also supports iconOnly rendering. An Icon can be displayed alongside the Button text, or on its own if iconOnly is true. If the MenuButton is only rendering an Icon, the text prop will be applied to the content of a Tooltip that will render upon hover or focus of the MenuButton for accessibility purposes. The MenuButton may also display an optional count alongside any text.

When a MenuButton is clicked, a Menu will be rendered within a Popover, and an optional onClick callback function will be triggered. The rendering of the Menu and its items will depend on the props passed to the MenuButton's menu prop. For more information on how to construct these props, check out the documentation for the Menu documentation.

Below are three demos that showcase suggested usage of the MenuButton component when used with each of the Menu component's three modes: action, single-select, and multi-select.

Action menu

Single-select menu

Multi-select menu