Back to ButtonGroup
View full API on ButtonGroup
ButtonGroup
Options API
Single-select time range and multi-select formatting toolbar with a separator.
Choose the reporting period for the chart.
Toggle one or more formatting styles.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| options* | ButtonGroupOption | { type: "separator" }[] | — | Option list rendered as merged buttons; separator items divide segments. |
| multiple | boolean | false | When true, value is string[] and options toggle independently. |
| value / defaultValue | string | string[] | — | Controlled / uncontrolled selected value(s). |
| onValueChange | (value: string | string[]) => void | — | Fires when the selection changes. |
| label | React.ReactNode | — | Top field label. |
| helpText | React.ReactNode | — | Group-level help text. |
| error | React.ReactNode | — | Error text; sets `aria-invalid` on the group. |
| required | boolean | — | Marks the field as required. |
| orientation | "horizontal" | "vertical" | horizontal | Layout direction for merged buttons. |
| size | Button size | sm | Size applied to every option button. |
| variant | Button variant | outline | Variant for unselected options. |
| selectedVariant | Button variant | solid | Variant for selected options. |
| disabled | boolean | — | Disables every option in the group. |
| className | string | — | Merged with the inner group classes. |