Menu presents a set of actions to perform on the currently visible or selected resource.
There are use cases when a "More" or "Actions" menu is needed to show contextual actions relevant to the currently visible resource. Usually these menus don't actually say "More" or "Actions", but show an icon with three dots in it.
Hightouch UI offers a convenience component specifically for that use case called MenuActionsButton
to replace MenuButton
with.
Icon can be vertical too.
If you need to use a custom icon, use MenuIconButton
component.
Use this variant to achieve a border around the menu button.
The menu button (including actions and icon button) can be disabled.
You can also disable individual menu items, instead of disabling the entire button.
The menu renders the popover invisibly on mount. To prevent widening the window unintentionally, the menu computes its position on mount. This may be turned off by using computePositionOnMount
.
Name | Default | Description |
---|---|---|
computePositionOnMount | true | boolean Compute the position of the menu on mount. |
children | — | ReactNode Menu button and list. |
closeOnSelect | true | boolean Close the menu when an item is selected. |
Name | Default | Description |
---|---|---|
children | — | ReactNode Button text. |
isDisabled | — | boolean Toggles the disabled state. |
variant | "secondary" | "primary" | "secondary" | "tertiary" The button variant. |
size | "md" | "sm" | "md" | "lg" Determines the height of the button. |
Name | Default | Description |
---|---|---|
aria-label | "Actions" | string Button text for screen readers. |
isDisabled | — | boolean Toggles the disabled state. |
size | "md" | "sm" | "md" | "lg" Determines the height of the button. |
variant | "tertiary" | "secondary" | "tertiary" Button variant, which determines its appearance. |
onClick | — | (event: MouseEvent<HTMLButtonElement>) => void Click event handler. |
Name | Default | Description |
---|---|---|
aria-label | — | string Button text for screen readers. |
icon | — | ComponentType<SVGAttributes<SVGElement>> Icon to show inside of a button. |
isDisabled | — | boolean Toggles the disabled state. |
size | "md" | "sm" | "md" | "lg" Determines the height of the button. |
variant | "tertiary" | "secondary" | "tertiary" Button variant, which determines its appearance. |
onClick | — | (event: MouseEvent<HTMLButtonElement>) => void Click event handler. |
Name | Default | Description |
---|---|---|
children | — | ReactNode Menu items. |
Name | Default | Description |
---|---|---|
isDisabled | — | boolean Determines if menu item is disabled. |
children | — | ReactNode Menu item text. |
icon | — | ComponentType<SVGAttributes<SVGElement>> Icon. |
variant | — | "normal" | "danger" Variant. Use `"danger"` for destructive or dangerous actions. |
onClick | — | (event: MouseEvent<HTMLButtonElement>) => void Callback for when user clicks a menu item. |
Name | Default | Description |
---|