Example
On mobile devices, the Menu automatically displays in a tray instead of a popover to improve usability.
Patterns
Collections
ActionGroup implements the react-stately collection component, <Item>.
Static collections, seen in the example above, can be used when the full list of options is known ahead of time.
Dynamic collections, as shown below, provide an iterable list of items to the component and a render function that returns Item elements.
Slots
Icons can be added as children of an item, to better communicate the intent of each option.
When the buttonLabelBehavior is set to "hide", the label is hidden and automatically shown in a tooltip.
Selection
Enable the selection of items with the selectionMode prop. See the react-stately selection docs for more information about selection.
Use the selectedKeys prop and the onSelectionChange handler to control the selected state of items within the action group.
Setting the selectionMode to "multiple" allows more than one selection.
Collapsing
By default, items wrap to form a new line when horizontal space is limited. However, this can cause content to shift below the group. If items should always appear in a single line, the overflowMode can be set to "collapse". In this mode, when horizontal space is limited, items will collapse into a menu. The exact behavior depends on the selection mode.
Standard
When selection is not enabled, ActionGroup displays as many items as possible and collapses the remaining items into a “more actions” menu.
Multi-select
When selection is enabled and space is limited, all items are collapsed into a menu together. The menu button indicates when one of the options within it is selected by showing a highlighted state.
A summaryIcon should be specified to visually communicate the purpose of the ActionGroup when collapsed, and an aria-label should be provided to describe the group to assistive technology.
Single-select
A special case where a summaryIcon is not needed is a single selectable ActionGroup (selectionMode="single") which enforces that an item is always selected (disallowEmptySelection). In this case, the selected item is displayed inside the menu button when collapsed.
Props
Disabled
To disable the entire group, use the isDisabled prop.
To disable individual items, a list of disabledKeys can be provided.
Prominence
By default, buttons have a background and border, which works well to separate buttons from surrounding content. Low prominence buttons have no “chrome” until they’re interacted with.
High prominence buttons should be used sparingly and in isolation, so they are not supported in groups.
Density
The density prop affects the gap between items. In the default case the borders of neighbouring buttons are merged, making them contiguous.
Low prominence groups have a reduced gap between each button.
Justified
The isJustified prop will divide the available horizontal space evenly among the buttons.