Button Group

Usage

Related: Buttons

import { Button, Buttongroup } from '@/ui'

const handleClick = () => {
	alert('You clicked me!')
}

return (			
	<Buttongroup>
        <Button
            className='dark active'
            onClick={handleClick}
            disabled
        >
            Left
        </Button>
        <Button
            className='dark'
            onClick={handleClick}
        >
            Middle
        </Button>
        <Button
            className='dark'
            onClick={handleClick}
        >
            Right
        </Button>
    </Buttongroup>
)

Orientation

<Buttongroup className='vertical'>

Sizes

X-Small

<Buttongroup size='xs'>

Small

<Buttongroup size='sm'>

Default

<Buttongroup>

Large

<Buttongroup size='lg'>

Icons

<Buttongroup>
	<Button
		className='info icon'
		title='Play'
	>
		<PlayIcon />
		<span className='sr-only'>Play</span>
	</Button>
	<Button
		className='info icon'
	>
		<PauseIcon />
		<span className='sr-only'>Pause</span>
	</Button>
	<Button className='info icon'>
		<StopIcon />
		<span className='sr-only'>Stop</span>
	</Button>
</Buttongroup>

<Buttongroup className='vertical'>

Icons Labels

<Buttongroup>
	<Button
		className='info'
		title='Play'
	>
		<PlayIcon />
		<span>Play</span>
	</Button>
	<Button
		className='info'
	>
		<PauseIcon />
		<span>Pause</span>
	</Button>
	<Button className='info'>
		<StopIcon />
		<span>Stop</span>
	</Button>
</Buttongroup>

<Buttongroup className='vertical'>

Outlines

<Buttongroup>
	<Button
		className='info outline'
		title='Play'
	>
		<PlayIcon />
		<span>Play</span>
	</Button>
	<Button
		className='info outline'
	>
		<PauseIcon />
		<span>Pause</span>
	</Button>
	<Button className='info outline'>
		<StopIcon />
		<span>Stop</span>
	</Button>
</Buttongroup>

<Buttongroup className='vertical'>

<Buttongroup className='vertical right'>

Options

size: 'xs' | 'sm' | 'lg' | undefined
className: string | undefined // // Any Tailwind classes can be added here
label: string | undefined // aria-label