Button Group

A set of related buttons.

General

The basic ButtonGroup usage.

Variant

set the type or styles of all buttons in the group.

Sizes

Change the size of the entire group button including the property type.

Vertical

You can use the vertical property to sort the buttons vertically.

Disabled

disable all buttons in the group.

Icon only buttons need a name for screen readers, so give each one an aria-label.

APIs

ButtonGroup.Props

Attribute	Description	Type	Accepted values	Default
type	button type	`ButtonTypes`	ButtonTypes	`default`
ghost	the opposite color	`boolean`	-	`false`
vertical	show all buttons vertically	`boolean`	-	`false`
disabled	disable all buttons	`boolean`	-	`false`
...	native props	`ButtonHTMLAttributes`	`'id', 'className', ...`	-

ButtonTypes

type ButtonTypes =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'abort'
  | 'secondary-light'
  | 'success-light'
  | 'warning-light'
  | 'error-light'

Edit this page on GitHub