ButtonGroup

At a glance

• Visually joins multiple buttons into a single connected unit.
• No toggle / selection semantics — for that, use SegmentedControl.
• Supports horizontal (default) and vertical orientations.
• Injects data-position (first / middle / last) on each child for CSS-side radius stripping on web.

v2 note: Middle-button corner-radius adjustment is applied via data-position CSS selectors on web. On native, the group renders with standard per-button radius — this will be improved in a follow-up.

Preview

Usage

import { Button, ButtonGroup } from '@nori-ui/core';
 
// Horizontal (default)
<ButtonGroup>
  <Button variant="secondary">Day</Button>
  <Button variant="secondary">Week</Button>
  <Button variant="secondary">Month</Button>
</ButtonGroup>
 
// Vertical
<ButtonGroup orientation="vertical">
  <Button variant="secondary">Top</Button>
  <Button variant="secondary">Middle</Button>
  <Button variant="secondary">Bottom</Button>
</ButtonGroup>

orientation

size

The size prop is forwarded to each child Button to enforce a uniform size across the group. Accepts the same values as Button's size prop (sm, md, lg). Omit it to let each child Button use its own size.

Props