Open in Playroom
For use within menu components, e.g. OverflowMenu, MenuRenderer.
You can choose between semantic links and buttons via the following components:
  • MenuItem which renders a button.
  • MenuItemLink which renders a link, using the linkComponent implementation from BraidProvider.
All semantic variants can be used interchangeably within a single menu.
For destructive actions like “Delete” you can set the menu item’s tone to critical. When using this feature, you may want to consider providing a confirmation via a Dialog.
Open in Playroom
For decoration and help distinguishing between menu items, an icon can be provided. This will be placed to the left of the text.
Open in Playroom
Add a Badge alongside the label of the menu item using the badge prop.
Open in Playroom
Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.