ButtonGroup API

API reference for the ButtonGroup component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.

Demos

For usage examples, visit the component demo page: ButtonGroup

Import

import { ButtonGroup } from '@soroush.tech/design-system/ButtonGroup'

Props

Prop	Type	Default	Description
`variant`	`'contained' \| 'outlined' \| 'text'`	`'outlined'`	Visual style for all child buttons.
`color`	`keyof Theme['palette']`	`'primary'`	Color palette for all child buttons.
`size`	`keyof Theme['sizes']`	`'md'`	Density for all child buttons.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout flow direction.
`borderRadius`	`keyof Theme['radii']`	`'md'`	Group corner radius - rounds the outer corners only.
`disabled`	`boolean`	`false`	Disables all child buttons.
`fullWidth`	`boolean`	`false`	Group fills its container; children share the width.
`as`	`ElementType`	`'div'`	Overrides the root element.

Also supports space props on the root.

Notes

Renders role="group" - always provide aria-label or aria-labelledby.
Separation between adjacent buttons is variant-aware: outlined hides the trailing button's leading edge (keeping its width) so the -thin overlap shows a single, un-doubled border, while contained and text draw a divider there instead (the color's dark shade for contained, a translucent main for text).
Children must be immediate Buttons (or components that read ButtonGroupContext).
This design system's buttons are flat (no elevation), so no shouldDisableElevation prop exists.
A split button (dropdown-driven action) is a composition of ButtonGroup + a menu and needs a Menu component, which the design system doesn't have yet.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.