Button Group

1import React from 'react'
2
3import { Button } from '@/components/ui/button'
4
5export function ButtonDemo() {
6    return <Button>Button</Button>
7}
8

1import React from 'react'
2import { CircleUserRound, CloudDownload, Cog } from 'lucide-react'
3
4import { Button } from '@/components/ui/button'
5import { ButtonGroup } from '@/components/ui/button-group'
6
7export function ButtonGroupSize() {
8    return (
9        <div className="flex flex-col items-center gap-4">
10            <ButtonGroup>
11                <Button variant={'outline'} size={'sm'}>
12                    <CircleUserRound />
13                    Profile
14                </Button>
15                <Button variant={'outline'} size={'sm'}>
16                    <Cog />
17                    Settings
18                </Button>
19                <Button variant={'outline'} size={'sm'}>
20                    <CloudDownload />
21                    Download
22                </Button>
23            </ButtonGroup>
24            <ButtonGroup>
25                <Button variant={'outline'} size={'default'}>
26                    <CircleUserRound />
27                    Profile
28                </Button>
29                <Button variant={'outline'} size={'default'}>
30                    <Cog />
31                    Settings
32                </Button>
33                <Button variant={'outline'} size={'default'}>
34                    <CloudDownload />
35                    Download
36                </Button>
37            </ButtonGroup>
38            <ButtonGroup>
39                <Button variant={'outline'} size={'lg'}>
40                    <CircleUserRound />
41                    Profile
42                </Button>
43                <Button variant={'outline'} size={'lg'}>
44                    <Cog />
45                    Settings
46                </Button>
47                <Button variant={'outline'} size={'lg'}>
48                    <CloudDownload />
49                    Download
50                </Button>
51            </ButtonGroup>
52        </div>
53    )
54}
55

1import React from 'react'
2import {
3    ChevronDown,
4    ChevronUp,
5} from 'lucide-react'
6
7import { Button } from '@/components/ui/button'
8import {
9    ButtonGroup,
10    ButtonGroupSeparator,
11} from '@/components/ui/button-group'
12
13export function ButtonGroupOrientation() {
14    return (
15        <div className="flex items-center gap-4">
16            <ButtonGroup orientation={'vertical'}>
17                <Button variant={'outline'} size={'icon'} className='border-b-transparent -mb-px'>
18                    <ChevronUp />
19                </Button>
20                <ButtonGroupSeparator orientation="horizontal" />
21                <Button variant={'outline'} size={'icon'}>
22                    <ChevronDown />
23                </Button>
24            </ButtonGroup>
25        </div>
26    )
27}
28