Button Group
A component for visually grouping a series of controls.
Button Group joins adjacent controls into one bordered row, removes the shared
edges, and separates them with ButtonGroupSeparator and ButtonGroupText. It
composes Base UI's useRender and mergeProps and marks itself with
data-slot.
Installation
npx shadcn@latest add @kosori/button-groupExample
button-group-example.tsx
import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react';
import { Button } from '@/components/ui/button';
import {
ButtonGroup,
ButtonGroupSeparator,
} from '@/components/ui/button-group';
const ButtonGroupExample = () => (
<ButtonGroup aria-label='Pagination'>
<ButtonGroup aria-label='Page numbers'>
<Button className='min-w-8' variant='outline'>
1
</Button>
<ButtonGroupSeparator />
<Button className='min-w-8' variant='outline'>
2
</Button>
<ButtonGroupSeparator />
<Button className='min-w-8' variant='outline'>
3
</Button>
<ButtonGroupSeparator />
<Button className='min-w-8' variant='outline'>
4
</Button>
<ButtonGroupSeparator />
<Button className='min-w-8' variant='outline'>
5
</Button>
</ButtonGroup>
<ButtonGroup aria-label='Navigation'>
<Button aria-label='Previous' size='icon' variant='outline'>
<IconArrowLeft aria-hidden='true' />
</Button>
<ButtonGroupSeparator />
<Button aria-label='Next' size='icon' variant='outline'>
<IconArrowRight aria-hidden='true' />
</Button>
</ButtonGroup>
</ButtonGroup>
);
export default ButtonGroupExample;
Usage
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
const ButtonGroupDemo = () => (
<ButtonGroup>
<Button variant='outline'>Previous</Button>
<Button variant='outline'>Next</Button>
</ButtonGroup>
);Variants
| Part | Prop | Values |
|---|---|---|
ButtonGroup | orientation | horizontal, vertical |