ButtonGroupDemo
import { Toggle } from '@/components/ui/toggle'
import { ButtonGroup } from '@/components/ui/button-group'
import { Button } from '@/components/ui/button'
export function ButtonGroupDemo() {
return (
<div className='flex flex-wrap items-center gap-8'>
<ButtonGroup>
<Toggle>
<i className='icon-[material-symbols--android-wifi-3-bar-rounded]' />
</Toggle>
<Toggle>
<i className='icon-[material-symbols--bluetooth-rounded]' />
</Toggle>
<Toggle>
<i className='icon-[material-symbols--alarm-outline-rounded]' />
</Toggle>
<Toggle>
<i className='icon-[material-symbols--link-rounded]' />
</Toggle>
</ButtonGroup>
<ButtonGroup>
<Button size='sm'>
<i className='icon-[material-symbols--skip-previous-rounded]' />
</Button>
<Button size='sm'>
<i className='icon-[material-symbols--play-arrow-rounded]' />
Play
</Button>
<Button size='sm'>
<i className='icon-[material-symbols--skip-next-rounded]' />
</Button>
</ButtonGroup>
<ButtonGroup variant='connected'>
<Toggle variant='tonal'>
<i className='icon-[material-symbols--android-wifi-3-bar-rounded]' />
WLan
</Toggle>
<Toggle variant='tonal'>
<i className='icon-[material-symbols--bluetooth-rounded]' />
Bluetooth
</Toggle>
<Toggle variant='tonal'>
<i className='icon-[material-symbols--alarm-outline-rounded]' />
Alarm
</Toggle>
<Toggle variant='tonal'>
<i className='icon-[material-symbols--link-rounded]' />
Link
</Toggle>
</ButtonGroup>
</div>
)
}
Installation
- Copy and paste the following code into your project
src/components/ui/button-group.tsx
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const buttonGroupVariants = cva('flex', {
variants: {
variant: {
standard: [
'gap-2 *:active:scale-x-110 *:data-[square=false]:active:rounded-xl *:data-[square=true]:active:rounded-[40px]',
'*:data-[square=false]:data-[state=on]:rounded-xl *:data-[square=true]:data-[state=on]:rounded-[40px]',
],
connected: [
'gap-0.5 *:not-first:not-last:rounded-lg *:first:rounded-r-lg *:last:rounded-l-lg',
'*:data-[state=on]:rounded-[40px]!',
],
},
},
defaultVariants: {
variant: 'standard',
},
})
function ButtonGroup({ variant, className, ...props }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
return <div role='group' data-slot='button-group' className={cn(buttonGroupVariants({ variant }), className)} {...props} />
}
export { ButtonGroup }
Usage
import { ButtonGroup } from '@/components/ui/button-group'
import { Button } from '@/components/ui/button'<ButtonGroup>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</ButtonGroup>API Reference
ButtonGroup
| Prop | type | default |
|---|---|---|
| variant | standard | connected | standard |