ButtonGroup

Segmented buttons that share a size and join into one control.

When to use

Use ButtonGroup when you need segmented buttons that share a size and join into one control.

Import

TypeScript

import { ButtonGroup } from '@gzodo/ui'

Use a group when the choices are mutually exclusive and should read as one control: a view switch, a filter, a range. Size set on the root is inherited by each ButtonGroup.Button unless a button overrides it.

Examples

Basic

Adjacent buttons drop the shared border and keep an 8px radius on the outer corners. active raises the selected segment.

Sizes

The root size applies to every child that does not set its own size.

Full width

fullWidth stretches the group and gives each button flex: 1.

ButtonGroup

Property

Description

Type

Default

children

ButtonGroup.Button elements.

ReactNode

—

size

Size inherited by child buttons.

'sm' | 'md' | 'lg' | 'xl'

—

fullWidth

Stretch the group and share width equally.

boolean

false

className

Class on the group root.

string

—

ButtonGroup.Button

Property

Description

Type

Default

active

Selected segment. Sets data-active and a primary ring.

boolean

false

size

Overrides the group size.

'sm' | 'md' | 'lg' | 'xl'

—

...Button

Every Button prop, including variant, color, and onClick.

ButtonProps

—

Button

Segment