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.
Name | Default | Description |
---|---|---|
isDisabled | false | boolean 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. |
Name | Default | Description |
---|---|---|
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. |