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
.
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.
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. |
width | — | "auto" |
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. |
tooltip | — | Omit<TooltipProps, "children"> Tooltip to display when hovering over the toggle button. |