|The text for the MenuButton also used to set the aria-label.|
|Additional CSS classes.|
|The total count representing the list data which was selected.|
|The name of the icon for the MenuButton.|
|Only display the icon. The text prop will be forwarded to a tooltip.|
|DOM id for the button element.|
|Menu related props.|
|The click handler for the MenuButton.|
|The keydown handler for the MenuButton.|
|Popover related props.|
|Ref for the button element.|
|Determines the Button variant for the MenuButton.|
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.