<ButtonGroup.Root>
<Button variant="outline">Day</Button>
<Button variant="outline">Week</Button>
<Button variant="outline">Month</Button>
</ButtonGroup.Root>The group strips the inner radii and collapses the shared borders. It groups actions; for picking one of a set, reach for SegmentedControl or ToggleGroup, which carry the selected state.
ButtonGroup.Text and ButtonGroup.Separator add a non-interactive label or a
rule inside the group — an input with a prefix, say.
API
ButtonGroup.Root
| Prop | Type | Default | |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Stacks the buttons into a column instead of a row, and moves the shared borders and corner radii to match. |
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
Plus every <div> prop. Source: button-group/components/button-group-root.tsx.
ButtonGroup.Separator
| Prop | Type | Default | |
|---|---|---|---|
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
className | string | ((state: SeparatorState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
orientation | Orientation | — | The orientation of the separator. |
render | ComponentRenderFn<HTMLProps, SeparatorState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: SeparatorState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
Plus the DOM props of the element it renders. Source: button-group/components/button-group-separator.tsx.
ButtonGroup.Text
| Prop | Type | Default | |
|---|---|---|---|
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <div> prop. Source: button-group/components/button-group-text.tsx.