Toggle Button

Toggle button group displays a set of options and allows user to select only one. The default height is 32px.

#

#

#

Use the separated variant when the group needs more visual weight.

#

When the toggle button is large, it has a larger height of 64px, and icons go on their own row.

#

When the toggle button is small, it has a smaller height of 24px.

#

Usually it's best to let the group manage its own size, but "width" can be set to "auto" to let the parent take over.

#

Icons can be used in buttons when additional clarity is required and the icon is highly relevant to the action. Icons should not be used for decoration.

#

A disabled button indicates that an action exists, but is not available currently.

#

#

NameDefaultDescription
isDisabledfalseboolean

Determines if all radios are disabled.

children

ReactNode

Radio inputs.

size

"sm" | "md" | "lg"

Toggle button size.

value

string | undefined

Selected radio value.

onChange

(value: string) => void

Callback for when user selects a different radio option.

width

"auto"

variant

"segmented" | "separated"

Default: "segmented"

#

NameDefaultDescription
aria-label

string

Toggle button's meaning for screen readers

isDisabled

boolean

Determines if toggle button is disabled.

accessory

IconAccessoryType

Primary icon that's displayed on the left.

label

ReactNode

Toggle button label.

value

string

Toggle button value.

tooltip

Omit<TooltipProps, "children">

Tooltip to display when hovering over the toggle button.

On this page

  • Example
  • Usage
  • Separated
  • Large
  • Small
  • Auto width
  • Icon
  • Disabled
  • Props
  • ToggleButtonGroup
  • ToggleButton