The Button Group component provides an elegant way to group related buttons together with consistent spacing and visual connection. Perfect for navigation, toolbars, and multi-step forms.
Installation
Examples
Default Size
Small Size with Icons
Large Size with Separation
Icon Only
Usage
Basic Usage
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/prismui/button-group"
export default function Example() {
return (
<ButtonGroup>
<Button>Previous</Button>
<Button>Next</Button>
</ButtonGroup>
)
}With Icons
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/prismui/button-group"
import { Grid, List } from "lucide-react"
export default function Example() {
return (
<ButtonGroup size="icon">
<Button variant="outline">
<Grid className="h-4 w-4" />
</Button>
<Button variant="outline">
<List className="h-4 w-4" />
</Button>
</ButtonGroup>
)
}Customization
Different Sizes
<ButtonGroup size="sm">
<Button>Small</Button>
<Button>Buttons</Button>
</ButtonGroup>Separated Buttons
<ButtonGroup separated>
<Button variant="outline">With</Button>
<Button variant="outline">Gaps</Button>
</ButtonGroup>Custom Styling
<ButtonGroup className="shadow-lg">
<Button className="font-bold">Custom</Button>
<Button className="font-bold">Styles</Button>
</ButtonGroup>Notes
- Built with class-variance-authority for type-safe variants
- Responsive design with mobile-first approach
- Supports all button variants from Shadcn UI
- Maintains proper focus states and accessibility
- Handles touch devices with appropriate spacing
- Supports vertical stacking on mobile
- TypeScript support with proper types
- Customizable through Tailwind classes
Features
- Multiple size variants
- Optional button separation
- Icon-only mode support
- Responsive layout
- Mobile-friendly design
- Focus management
- Keyboard navigation
- Consistent spacing
Props
| Prop | Type | Description |
|---|---|---|
| size | "default" | "sm" | "lg" | "icon" | The size of the button group |
| separated | boolean | Whether to add spacing between buttons |
| className | string | Additional CSS classes |
| children | React.ReactNode | The buttons to be grouped |