| Name | Description | Default | Type |
|---|---|---|---|
text* | The text for the MenuButton also used to set the aria-label. | | string |
className | Additional CSS classes. | | string |
count | The total count representing the list data which was selected. | | 'null' |number |
icon | The name of the icon for the MenuButton. | | string |
iconOnly | Only display the icon. The text prop will be forwarded to a tooltip. | | boolean |
id | DOM id for the button element. | | string |
menu | Menu related props. | | MenuProps |
onClick | The click handler for the MenuButton. | | MouseEventHandler<Element> |
onKeyDown | The keydown handler for the MenuButton. | | KeyboardEventHandler<Element> |
popover | Popover related props. | | OmitStrict<PopoverProps<string>, 'show' |'target' |'children'> |
ref | Ref for the button element. | | Ref<HTMLButtonElement> |
variant | Determines the Button variant for the MenuButton. | "secondary" | 'link' |'text' |'primary' |'secondary' |'simple' |
MenuButton
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The MenuButton component is a Button that will open up a Menu.
To learn more about configuration, visit Pega Community.
Usage
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.
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.