Atoms / Button Group

Button Group

<ButtonGroup />Stable

Clustered buttons that share inner edges (single rounded outer corners). Use for related actions, segmented controls, split buttons. Built on Button + group styles.

import { ButtonGroup, ButtonGroupSeparator } from "@/components/upnext";

Explorer

Cross any button variant with any layout shape — flip the pills to test combinations the canned examples don't cover. Hover any element with inspect mode on to see its tokens.

Button variant

Size

Layout

<ButtonGroup>
  <Button variant="outline">Day</Button>
  <Button variant="outline">Week</Button>
  <Button variant="outline">Month</Button>
</ButtonGroup>

Variants

<ButtonGroup>
  <Button variant="outline">Day</Button>
  <Button variant="outline">Week</Button>
  <Button variant="outline">Month</Button>
</ButtonGroup>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.