Docs/ButtonGroup

ButtonGroup

Groups buttons with shared borders - outer corners rounded, inner flat.

Usage

tsx

1import { ButtonGroup, Button } from '@storm-ds/ui'
2
3<ButtonGroup>
4  <Button>Left</Button>
5  <Button>Center</Button>
6  <Button>Right</Button>
7</ButtonGroup>

Default

With Variants

With Icons

tsx

1import { ButtonGroup, Button } from '@storm-ds/ui'
2import { ChevronLeft, ChevronRight, Plus } from '@storm-ds/icons'
3
4<ButtonGroup>
5  <Button variant="outline" iconOnly><ChevronLeft /></Button>
6  <Button variant="outline" iconOnly><Plus /></Button>
7  <Button variant="outline" iconOnly><ChevronRight /></Button>
8</ButtonGroup>

Props

Prop	Type	Default	Description
className	string	-	Custom classes on the group wrapper

Use with AI

Create a Next.js component using Storm UI's ButtonGroup. Import: `import { ButtonGroup, Button } from '@storm-ds/ui'`. Groups buttons with role="group". Outer corners rounded, inner corners flat. Use `iconOnly` prop on Button for icon-only buttons inside the group - pair with @storm-ds/icons imports. Example: `<ButtonGroup><Button variant="outline">Left</Button><Button variant="outline">Center</Button><Button variant="outline">Right</Button></ButtonGroup>`

Card

ScrollArea