Button Group

Button groups visually unite related actions so users perceive them as a single control cluster. Use them for segmented choices or paired operations.

Try it

Usage

Place RuiButton children inside RuiButtonGroup. Set orientation when stacking vertically in narrow layouts.

import { RuiButtonGroup } from '@ecopages/radiant-ui/button-group';
import { RuiButton } from '@ecopages/radiant-ui/button';
 
<RuiButtonGroup orientation="horizontal">
  <RuiButton variant="outline">Cancel</RuiButton>
  <RuiButton variant="filled">Save</RuiButton>
</RuiButtonGroup>

Group related actions only

Keep actions logically connected, such as confirm/cancel pairs, view toggles, or formatting tools. Unrelated buttons should stand apart.

Orientation

Use horizontal for toolbars and dialog footers. Switch to vertical in side panels or mobile layouts where width is constrained.

Theming

Button Group maps to semantic spacing roles, never Tailwind palette steps:

The horizontal / vertical modifiers change flow layout only and add no color. Override at the theme layer, not in component CSS.

API

RuiButtonGroup is a presentational JSX view over a <div role="group">, no custom element.

Props

CSS classes

Public BEM classes on the rendered element (documented via @cssclass on RuiButtonGroup):

Theme roles

Accessibility

• Each button inside the group retains its own accessible name and keyboard focus.
• When buttons represent a single choice, consider toggle buttons with aria-pressed instead of separate submit actions.
• Maintain visible focus indicators on every button in the group.