Loading...
Installation
Usage
import { ButtonGroup } from "@/components/ui/button-group"
export default function App() {
return (
<
Getting Started
A segmented control component that groups multiple buttons together with shared borders and styling. Button groups are useful for creating toggle controls, navigation tabs, and related action sets.
import { ButtonGroup } from "@/components/ui/button-group"
export default function App() {
return (
<
The button group component automatically handles border styling, spacing, and corner radius for grouped buttons. It supports three size variants.
Button groups work seamlessly with icon-only buttons, making them ideal for navigation controls and toolbar actions.
[&>*:not(:first-child)] and [&>*:not(:last-child)] for automatic stylingasChildThe ButtonGroup component accepts all standard div HTML attributes plus:
| Prop | Type | Default | Description |
|---|---|---|---|
size | s | r | m | r | The size of the button group (s=28px, r=32px, m=36px) |
orientation | horizontal | vertical | horizontal | The orientation of the button group |
fullWidth | boolean | false | Whether the button group should take full width of its container |
children | ReactNode | - | Button elements to be grouped together |
A text/label component that can be used within button groups for non-interactive content.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Change the default rendered element for the one passed as a child (uses Radix Slot) |
children | ReactNode | - | Text content or child elements |
The button group uses the following design tokens:
--button-height-s (28px), --button-height-r (32px), --button-height-m (36px)--button-radius-s (7px), --button-radius-r (8px), --button-radius-m (9px)--grey-bg-fill-12-bg-white (background)--grey-stroke-alpha-4-hover (borders)--grey-shadow-4 (shadows)--gap-4 (8px) for internal spacingaria-label for icon-only buttonsimport { ButtonGroup } from '@/registry/basic-ui/button-group';
import { Button } from '@/registry/basic-ui/button';
export function ButtonGroupDemo() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Size: 28px (s) */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium">Size: 28px (s)</h3>
<ButtonGroup size="s">
<Button variant="text">Action</Button>
<Button variant="text">Action</Button>
<Button variant="text" disabled>
Action
</Button>
<Button variant="text">
<div className="flex items-center gap-(--gap-2)">
<span>Action</span>
<svg
className=" w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m6 9 6 6 6-6" />
</svg>
</div>
</Button>
</ButtonGroup>
</div>
{/* Size: 32px (r) - Default */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium">Size: 32px (r) - Default</h3>
<ButtonGroup size="r">
<button>Action</button>
<button>Action</button>
<button disabled>Action</button>
<button>
Action
<svg
className="ml-(--gap-2) w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m6 9 6 6 6-6" />
</svg>
</button>
</ButtonGroup>
</div>
{/* Size: 36px (m) */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium">Size: 36px (m)</h3>
<ButtonGroup size="m">
<button>Action</button>
<button>Action</button>
<button disabled>Action</button>
<button>
Action
<svg
className="ml-(--gap-2) w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m6 9 6 6 6-6" />
</svg>
</button>
</ButtonGroup>
</div>
</div>
);
}
import { ButtonGroup } from '@/registry/basic-ui/button-group';
import { Button } from '@/registry/basic-ui/button';
export function ButtonGroupDemo() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Size: 28px (s) */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium">Size: 28px (s)</h3>
<ButtonGroup size="s">
<Button variant="text">Action</Button>
<Button variant="text">Action</Button>
<Button variant="text" disabled>
Action
</Button>
<Button variant="text">
<div className="flex items-center gap-(--gap-2)">
<span>Action</span>
<svg
className=" w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m6 9 6 6 6-6" />
</svg>
</div>
</Button>
</ButtonGroup>
</div>
{/* Size: 32px (r) - Default */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium">Size: 32px (r) - Default</h3>
<ButtonGroup size="r">
<button>Action</button>
<button>Action</button>
<button disabled>Action</button>
<button>
Action
<svg
className="ml-(--gap-2) w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m6 9 6 6 6-6" />
</svg>
</button>
</ButtonGroup>
</div>
{/* Size: 36px (m) */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium">Size: 36px (m)</h3>
<ButtonGroup size="m">
<button>Action</button>
<button>Action</button>
<button disabled>Action</button>
<button>
Action
<svg
className="ml-(--gap-2) w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m6 9 6 6 6-6" />
</svg>
</button>
</ButtonGroup>
</div>
</div>
);
}
import { ButtonGroup } from '@/registry/basic-ui/button-group';
export function ButtonGroupIconDemo() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Icon buttons - Size 28px */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium">Icon Buttons - 28px</h3>
<ButtonGroup size="s">
<button className="w-8" aria-label="Previous">
<svg
className="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m15 18-6-6 6-6" />
</svg>
</button>
<button className="w-8" aria-label="Up">
<svg
className="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m18 15-6-6-6 6" />
</svg>
</button>
<button className="w-8" aria-label="Next">
<svg
className="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</ButtonGroup>
</div>
{/* Icon buttons - Size 32px */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium">Icon Buttons - 32px</h3>
<ButtonGroup size="r">
<button className="w-9" aria-label="Previous">
<svg
className="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m15 18-6-6 6-6" />
</svg>
</button>
<button className="w-9" aria-label="Up">
<svg
className="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m18 15-6-6-6 6" />
</svg>
</button>
<button className="w-9" aria-label="Next">
<svg
className="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</ButtonGroup>
</div>
{/* Icon buttons - Size 36px */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium">Icon Buttons - 36px</h3>
<ButtonGroup size="m">
<button className="w-10" aria-label="Previous">
<svg
className="w-[18px] h-[18px]"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m15 18-6-6 6-6" />
</svg>
</button>
<button className="w-10" aria-label="Up">
<svg
className="w-[18px] h-[18px]"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m18 15-6-6-6 6" />
</svg>
</button>
<button className="w-10" aria-label="Next">
<svg
className="w-[18px] h-[18px]"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</ButtonGroup>
</div>
</div>
);
}