Button Group

A set of related buttons.

General

The basic ButtonGroup usage.

Preview
See code

Variant

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

Preview
See code

Sizes

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

Preview
See code

Vertical

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

Preview
See code

Disabled

disable all buttons in the group.

Preview
See code

APIs

ButtonGroup.Props

AttributeDescriptionTypeAccepted valuesDefault
typebutton typeButtonTypesButtonTypesdefault
ghostthe opposite colorboolean-false
verticalshow all buttons verticallyboolean-false
disableddisable all buttonsboolean-false
...native propsButtonHTMLAttributes'id', 'className', ...-

ButtonTypes

type ButtonTypes =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'abort'
  | 'secondary-light'
  | 'success-light'
  | 'warning-light'
  | 'error-light'
Edit this page on GitHub

Previous

Button Dropdown

Next

Capacity

MADE & DESIGNED WITHBY BRUNO ANDRADE
docs background gradient blue
docs background gradient violet