For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
Home

Button Group

PreviousNext

Connects multiple buttons into a single visual unit, sharing borders and aligned corners.

import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";

export function ButtonGroupDemo() {
  return (
    <ButtonGroup>
      <Button variant="outline">Years</Button>
      <Button variant="outline">Months</Button>
      <Button variant="outline">Days</Button>
    </ButtonGroup>
  );
}

Variants

ButtonGroup works with any Button variant. The visual join adapts automatically.

Default

Outline

The most common pairing — shared borders make the group feel like a single segmented control.

Secondary

Sizes

Works with all Button size props.

Vertical

Set orientation="vertical" for a stacked layout.

With Icons

ButtonGroup works with icon-only buttons too.

Props

ButtonGroup

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Layout direction of the group
classNamestring—Additional CSS classes
childrenReactNode—Button elements

Usage

import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
 
// Horizontal (default)
<ButtonGroup>
  <Button variant="outline">Years</Button>
  <Button variant="outline">Months</Button>
  <Button variant="outline">Days</Button>
</ButtonGroup>
 
// Vertical
<ButtonGroup orientation="vertical">
  <Button variant="outline">Top</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Bottom</Button>
</ButtonGroup>

Specs

# Mint — Button Group Specs
 
## Component
- name: button-group
- file: registry/mint/button-group.tsx
- installs to: components/ui/button-group.tsx
- registryDependencies: button
 
## What is it
A layout wrapper that connects multiple Button elements into a single visual
unit. Adjacent buttons share borders (via -mr-px / -mb-px overlap) and have
their inner border-radius clipped to zero. The result reads as a segmented
control or grouped action bar. No JavaScript — purely CSS using child selectors
targeting data-slot="button".
 
## Visual identity
Borderless gap between buttons — they share a single 1px border. Outer corners
retain the Button's rounded-md radius. Inner corners are fully square. On
hover/focus, the active button lifts to z-10 so its border renders over its
neighbors cleanly.
 
## How it works
- Targets [data-slot=button] direct children with CSS attribute selectors
- Horizontal: first child: rounded-r-none, last child: rounded-l-none,
  middle children: rounded-none, non-last: -mr-px
- Vertical: first child: rounded-b-none, last child: rounded-t-none,
  middle children: rounded-none, non-last: -mb-px
- All children get position: relative for z-index to work
- hover and focus-visible push the active button to z-10
 
## Conventions
- All children should use the same variant and size for visual consistency
- Do not mix variants inside a group (e.g. default + outline)
- For active/selected state management, use Radix ToggleGroup instead
- Minimum 2 buttons; prefer 2–5 (beyond 5, consider a different pattern)
- With icon-only buttons: use size="icon" consistently across all items

Installation

GIN Design Plugin
$ npx shadcn add https://gin-design.vercel.app/button-group