Copy to clipboard
<ButtonGroup>
<Button variant="outline">Left</Button>
<Button variant="outline">Center</Button>
<Button variant="outline">Right</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">Left</Button>
<Button variant="outline">Center</Button>
<Button variant="outline">Right</Button>
</ButtonGroup><ButtonGroup>
<Button variant="outline">Left</Button>
<Button variant="outline">Center</Button>
<Button variant="outline">Right</Button>
</ButtonGroup>
Installation
Copy to clipboard
npx bearnie add button-group
npx bearnie add button-groupnpx bearnie add button-group
bunx bearnie add button-group
bunx bearnie add button-groupbunx bearnie add button-group
pnpm dlx bearnie add button-group
pnpm dlx bearnie add button-grouppnpm dlx bearnie add button-group
yarn dlx bearnie add button-group
yarn dlx bearnie add button-groupyarn dlx bearnie add button-group
Usage
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/components/bearnie"<ButtonGroup>
<Button variant="outline">Left</Button>
<Button variant="outline">Center</Button>
<Button variant="outline">Right</Button>
</ButtonGroup>Examples
Vertical
Copy to clipboard
<ButtonGroup orientation="vertical">
<Button variant="outline">Top</Button>
<Button variant="outline">Middle</Button>
<Button variant="outline">Bottom</Button>
</ButtonGroup>
<ButtonGroup orientation="vertical">
<Button variant="outline">Top</Button>
<Button variant="outline">Middle</Button>
<Button variant="outline">Bottom</Button>
</ButtonGroup><ButtonGroup orientation="vertical">
<Button variant="outline">Top</Button>
<Button variant="outline">Middle</Button>
<Button variant="outline">Bottom</Button>
</ButtonGroup>
Icon buttons
Copy to clipboard
<ButtonGroup>
<Button variant="outline" iconOnly>
<Bold />
</Button>
<Button variant="outline" iconOnly>
<Italic />
</Button>
<Button variant="outline" iconOnly>
<Underline />
</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline" iconOnly>
<Bold />
</Button>
<Button variant="outline" iconOnly>
<Italic />
</Button>
<Button variant="outline" iconOnly>
<Underline />
</Button>
</ButtonGroup><ButtonGroup>
<Button variant="outline" iconOnly>
<Bold />
</Button>
<Button variant="outline" iconOnly>
<Italic />
</Button>
<Button variant="outline" iconOnly>
<Underline />
</Button>
</ButtonGroup>
With separator
Copy to clipboard
<ButtonGroup>
<Button>Save</Button>
<ButtonGroupSeparator />
<Button iconOnly>
<ChevronDown />
</Button>
</ButtonGroup>
<ButtonGroup>
<Button>Save</Button>
<ButtonGroupSeparator />
<Button iconOnly>
<ChevronDown />
</Button>
</ButtonGroup><ButtonGroup>
<Button>Save</Button>
<ButtonGroupSeparator />
<Button iconOnly>
<ChevronDown />
</Button>
</ButtonGroup>
Split button
Copy to clipboard
<ButtonGroup>
<Button variant="outline">
<Copy slot="left-icon" />
Copy
</Button>
<ButtonGroupSeparator />
<Button variant="outline" iconOnly>
<ChevronDown />
</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">
<Copy slot="left-icon" />
Copy
</Button>
<ButtonGroupSeparator />
<Button variant="outline" iconOnly>
<ChevronDown />
</Button>
</ButtonGroup><ButtonGroup>
<Button variant="outline">
<Copy slot="left-icon" />
Copy
</Button>
<ButtonGroupSeparator />
<Button variant="outline" iconOnly>
<ChevronDown />
</Button>
</ButtonGroup>
With input
Copy to clipboard
<ButtonGroup>
<Input placeholder="Enter URL..." class="rounded-r-none" />
<Button variant="outline">Go</Button>
</ButtonGroup>
<ButtonGroup>
<Input placeholder="Enter URL..." class="rounded-r-none" />
<Button variant="outline">Go</Button>
</ButtonGroup><ButtonGroup>
<Input placeholder="Enter URL..." class="rounded-r-none" />
<Button variant="outline">Go</Button>
</ButtonGroup>
With text
Copy to clipboard
https://
<ButtonGroup>
<ButtonGroupText>https://</ButtonGroupText>
<Input placeholder="lexingtonthemes.com" class="rounded-l-none border-l-0" />
</ButtonGroup>
<ButtonGroup>
<ButtonGroupText>https://</ButtonGroupText>
<Input placeholder="lexingtonthemes.com" class="rounded-l-none border-l-0" />
</ButtonGroup><ButtonGroup>
<ButtonGroupText>https://</ButtonGroupText>
<Input placeholder="lexingtonthemes.com" class="rounded-l-none border-l-0" />
</ButtonGroup>
Toolbar
Copy to clipboard
<ButtonGroup>
<Button variant="secondary" iconOnly>
<Bold />
</Button>
<Button variant="outline" iconOnly>
<Italic />
</Button>
<Button variant="outline" iconOnly>
<Underline />
</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="secondary" iconOnly>
<Bold />
</Button>
<Button variant="outline" iconOnly>
<Italic />
</Button>
<Button variant="outline" iconOnly>
<Underline />
</Button>
</ButtonGroup><ButtonGroup>
<Button variant="secondary" iconOnly>
<Bold />
</Button>
<Button variant="outline" iconOnly>
<Italic />
</Button>
<Button variant="outline" iconOnly>
<Underline />
</Button>
</ButtonGroup>
Sizes
Copy to clipboard
<div class="flex flex-col gap-4">
<ButtonGroup>
<Button variant="outline" size="sm">Small</Button>
<Button variant="outline" size="sm">Group</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">Default</Button>
<Button variant="outline">Group</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline" size="lg">Large</Button>
<Button variant="outline" size="lg">Group</Button>
</ButtonGroup>
</div>
<div class="flex flex-col gap-4">
<ButtonGroup>
<Button variant="outline" size="sm">Small</Button>
<Button variant="outline" size="sm">Group</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">Default</Button>
<Button variant="outline">Group</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline" size="lg">Large</Button>
<Button variant="outline" size="lg">Group</Button>
</ButtonGroup>
</div><div class="flex flex-col gap-4">
<ButtonGroup>
<Button variant="outline" size="sm">Small</Button>
<Button variant="outline" size="sm">Group</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">Default</Button>
<Button variant="outline">Group</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline" size="lg">Large</Button>
<Button variant="outline" size="lg">Group</Button>
</ButtonGroup>
</div>
Anatomy
ButtonGroup- Container withrole="group"that connects child elementsButtonGroupSeparator- Visual divider between buttonsButtonGroupText- Styled text element matching button heights
Props
ButtonGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | horizontal | vertical | horizontal | Layout direction |
| class | string | - | Additional CSS classes |
ButtonGroupSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | horizontal | vertical | vertical | Separator direction |
| class | string | - | Additional CSS classes |
ButtonGroupText
| Prop | Type | Default | Description |
|---|---|---|---|
| size | xs | sm | default | lg | xl | default | Text container size |
| class | string | - | Additional CSS classes |