Skip to main content

Interface: ButtonGroupProps

Defined in: components/ButtonGroup/ButtonGroup.tsx:81

Props for the ButtonGroup component.

Extends​

  • Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "className">

Properties​

align?​

optional align?: ActionGroupAlign

Defined in: components/ButtonGroup/ButtonGroup.tsx:108

Where the actions sit along whichever axis has free space: the main axis in a row (justify-content), the cross axis in a column (align-items). A form footer typically wants end; a page header's action cluster wants start.

Default​

'start'

children?​

optional children?: ReactNode

Defined in: components/ButtonGroup/ButtonGroup.tsx:110

The related actions — Button, ActionButton or ToggleButton.

Overrides​

Omit.children

orientation?​

optional orientation?: ButtonGroupOrientation

Defined in: components/ButtonGroup/ButtonGroup.tsx:99

Axis the actions are laid along.

horizontal (default) is adaptive: when the row does not fit its container the group lays the actions out in a column instead, so a pair of commands stays readable and tappable in a narrow context rather than clipping. vertical is a fixed column — it opts out of the measurement entirely, which is also the escape hatch when you want the axis pinned.

The axis actually rendered is published as data-orientation, and data-collapsed="true" marks a horizontal request that had to give way.

Default​

'horizontal'