Skip to main content
Give a group an accessible name and place related buttons inside it. The group joins adjacent borders and can apply a shared size, variant, and color. Buttons retain their own tab stops.

State ownership

ButtonGroup coordinates appearance, not selection. It has no controlled or uncontrolled selection mode. Each button receives its own action handler and application state; see Button’s state ownership example for loading behavior. For a mutually exclusive choice, use RadioGroup, which owns selection for its radio controls.

Usage

Props

"neutral" | "accent" | "danger" | "success"
Shared semantic color that overrides the color of buttons in the group.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
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.
"sm" | "md"
Shared button height that overrides the size of buttons in the group.
"solid" | "outline" | "ghost" | "soft"
Shared surface treatment that overrides the variant of buttons in the group.