Chuv Studio — Design System

Core Patterns

Use grouped buttons when actions belong to the same decision space

Basic

<ButtonGroup>
  <Button variant="outline">Archive</Button>
  <Button variant="outline">Report</Button>
  <Button variant="outline">Export</Button>
</ButtonGroup>

Split

<ButtonGroup>
  <Button>New Item</Button>
  <ButtonGroupSeparator />
  <Button size="icon">
    <ChevronDown />
  </Button>
</ButtonGroup>

Studio Contexts

Grouped actions that fit portfolio management, tooling, and navigation flows

Case Actions

Tooling Cluster

View Switch

<ButtonGroup>
  <Button variant="outline">Preview</Button>
  <Button variant="outline">Publish</Button>
  <Button size="icon" variant="outline">
    <MoreHorizontal />
  </Button>
</ButtonGroup>

Composition Patterns

Button groups can include text, separators, icons, and vertical arrangements

With Text

Tooling

<ButtonGroup>
  <ButtonGroupText>Tooling</ButtonGroupText>
  <Button variant="outline">Review</Button>
  <Button variant="outline">Apply</Button>
</ButtonGroup>

Vertical

<ButtonGroup orientation="vertical">
  <Button size="icon" variant="outline">
    <Plus />
  </Button>
  <Button size="icon" variant="outline">
    <Trash2 />
  </Button>
</ButtonGroup>

Interactive Demo

Adjust orientation and density to preview how grouped actions behave across layouts

Orientation

Density

Usage

Import, structure, and accessibility behavior

Import

import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@/components/ui/button-group"

Key Props

Use orientation on ButtonGroup, then compose Button, ButtonGroupText, and ButtonGroupSeparator depending on the action cluster.

When To Use

Use button groups when actions belong to the same object, step, or decision zone and need to feel visually connected.

When Not To Use

Avoid grouping unrelated actions just to save space. Use standalone buttons when hierarchy or intent is different.

Accessibility Notes

The wrapper uses role="group". Keep labels clear, provide aria-label on icon-only buttons, and preserve logical action order.

Button Group