Toggle Button

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

#

#

#

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

#

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"

Toggle button size.

value

string | undefined

Selected radio value.

onChange

(value: string) => void

Callback for when user selects a different radio option.

#

NameDefaultDescription
aria-label

string

Toggle button's meaning for screen readers

isDisabled

boolean

Determines if toggle button is disabled.

icon

ComponentType<SVGAttributes<SVGElement>>

Primary icon that's displayed on the left.

label

ReactNode

Toggle button label.

value

string

Toggle button value.

On this page

  • Example
  • Usage
  • Small
  • Icon
  • Disabled
  • Props
  • ToggleButtonGroup
  • ToggleButton