ActionButtonGroup

An ActionButtonGroup is a grouping of related ActionButtons.

orientation

size

density

staticColor

isQuiet

isJustified

isDisabled

import {ActionButtonGroup, ActionButton, Text} from '@react-spectrum/s2/ActionButtonGroup';
import Cut from '@react-spectrum/s2/icons/Cut';
import Copy from '@react-spectrum/s2/icons/Copy';
import Paste from '@react-spectrum/s2/icons/Paste';

<ActionButtonGroup>
  <ActionButton>
    <Cut />
    <Text>Cut</Text>
  </ActionButton>
  <ActionButton>
    <Copy />
    <Text>Copy</Text>
  </ActionButton>
  <ActionButton>
    <Paste />
    <Text>Paste</Text>
  </ActionButton>
</ActionButtonGroup>

API

<ActionButtonGroup>
  <ActionButton />
</ActionButtonGroup>

ActionButtonGroup

Name	Type	Default
`styles`	`StylesPropWithHeight`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`children`	`ReactNode`	Default: —
The children of the group.
`size`	`'XS' \| 'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
Size of the buttons.
`density`	`'compact' \| 'regular'`	Default: `'regular'`
Spacing between the buttons.
`isQuiet`	`boolean`	Default: —
Whether the button should be displayed with a quiet style.
`isJustified`	`boolean`	Default: —
Whether the buttons should divide the container width equally.
`staticColor`	`'white' \| 'black' \| 'auto'`	Default: —
The static color style to apply. Useful when the ActionButtonGroup appears over a color background.
`orientation`	`'horizontal' \| 'vertical'`	Default: `'horizontal'`
The axis the group should align with.
`isDisabled`	`boolean`	Default: —
Whether the group is disabled.