Components

ButtonGroup

Gathers related buttons into one row or column, spaced or joined.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { ButtonGroup } from '@bigbang/ui';
Source: ButtonGroup.tsx
Storybook: ButtonGroup · Playground

ButtonGroup is in the @bigbang/ui package.

import { Button, ButtonGroup } from '@bigbang/ui';

<ButtonGroup attached label="Pages">
  <Button variant="secondary">Previous</Button>
  <Button variant="secondary">Next</Button>
</ButtonGroup>;

Props

label

Description: Name of the group for screen readers, such as "Metin biçimi". Give it when the buttons only make sense together; without it the group has no name.
Type: string

orientation

Description: Direction of the buttons. Arrow keys are not used; each button is its own tab stop.
Type: 'horizontal' | 'vertical'
Default: 'horizontal'

attached

Description: Joins the buttons into one control with shared borders, for related actions such as a split action or a pager. Use secondary Buttons inside.
Type: boolean
Default: false

className

Description: For layout only: margins and placement.
Type: string

childrenRequired

Description: The Buttons or IconButtons, all of the same size, with ButtonGroup.Text, ButtonGroup.Separator or nested ButtonGroups between them.
Type: ReactNode

Data attributes

data-component="button-group": on the root element.
data-orientation: horizontal or vertical.
data-attached: when attached is set.
data-part="text" and data-part="separator": on ButtonGroup.Text and ButtonGroup.Separator.

Parts

ButtonGroup.Text: static text inside the group, such as a unit or a value; it stretches to the buttons’ height.
ButtonGroup.Separator: a decorative 1 px line between filled buttons of an attached group.
A ButtonGroup inside a ButtonGroup: the inner groups sit 8 px apart.