Components
ButtonGroup
A group of buttons with merged borders.
ButtonGroup arranges related buttons together with shared borders, useful for toolbars and segmented actions.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/button-group.jsonUsage
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
export default function Example() {
return (
<ButtonGroup>
<Button variant="outline">Bold</Button>
<Button variant="outline">Italic</Button>
<Button variant="outline">Underline</Button>
</ButtonGroup>
);
}Examples
Default
With separator
With text
Vertical
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
buttonGroupVariants | cva()Class helper · class-variance-authority | — |
ButtonGroupdata-slot="button-group" | <div>HTML |
|
ButtonGroupTextdata-slot="button-group-text" | <div>HTML | — |
ButtonGroupSeparatordata-slot="button-group-separator" | SeparatorFaber UI | — |
Last updated on