Menu button

A button with more than one action.

Props

ariaLabel
string
Sets the aria-label for the icon button in icon-only mode.
Defaults to Open menu.
leadingIcon
GoabIconType
Icon displayed before the button text. When no text is provided, displays as an icon button.
maxWidth
string
Maximum width of the dropdown menu.
size
GoabButtonSize
Sets the size of the button.
Defaults to normal.
testId
string
Sets a data-testid attribute for automated testing.
text
string
The button label text. When provided, displays as a text button with a dropdown icon.
type
GoabButtonType
The button style variant.
Defaults to primary.
variant
GoabButtonVariant
Sets the color variant for semantic meaning.
Defaults to normal.
ariaLabel
string
Sets the aria-label for the icon button in icon-only mode.
leadingIcon
GoabIconType
Icon displayed before the button text. When no text is provided, displays as an icon button.
maxWidth
string
Maximum width of the dropdown menu.
size
GoabButtonSize
Sets the size of the button.
testId
string
Sets a data-testid attribute for automated testing.
text
string
The button label text. When provided, displays as a text button with a dropdown icon.
type
GoabButtonType
The button style variant.
variant
GoabButtonVariant
Sets the color variant for semantic meaning.
max-width
string
Maximum width of the dropdown menu.
aria-label
string
Sets the aria-label for the icon button in icon-only mode.
Defaults to Open menu.
leading-icon
GoabIconType
Icon displayed before the button text. When no text is provided, displays as an icon button.
size
"normal" | "compact"
Sets the size of the button.
Defaults to normal.
testid
string
Sets a data-testid attribute for automated testing.
text
string
The button label text. When provided, displays as a text button with a dropdown icon.
type
"primary" | "secondary" | "tertiary"
The button style variant.
Defaults to primary.
variant
"normal" | "destructive"
Sets the color variant for semantic meaning.
Defaults to normal.
version
"1" | "2"
Design system version for styling.
Defaults to 1.

Events

onAction
(detail: GoabMenuButtonOnActionDetail) => void
Callback fired when a menu action is selected.
onAction
(event: GoabMenuButtonOnActionDetail) => void
Emits when a menu action is clicked. Emits the action detail.
_action
CustomEvent<{ action?: string; size?: "normal" | "compact" }>
action
string
Action identifier included in the click event.
text
string
Display text for the menu action.
icon
GoabIconType
Icon displayed before the text.
testId
string
Sets a data-testid attribute for automated testing.
action
string
Action identifier included in the click event.
text
string
Display text for the menu action.
icon
GoabIconType
Icon displayed before the text.
testId
string
Sets a data-testid attribute for automated testing.
action
string
Action identifier included in the click event.
Defaults to default.
icon
GoabIconType
Icon displayed before the text.
testid
string
Sets a data-testid attribute for automated testing.
text
string
Display text for the menu action.
Examples
Examples show common usage patterns and implementation guidance.

Other

Don't
Don't use MenuButton for navigation menus. Use AppHeaderMenu or SideMenu for navigation. MenuButton is for action lists.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

Related components

Button

Carry out an important action or navigate to another page.
Popover

A small overlay that opens on demand, used in other components.
View old component docs