Button Group

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 ButtonGroupDemo() {
8    return (
9        <ButtonGroup>
10            <Button variant={'outline'}>
11                <CircleUserRound />
12                Profile
13            </Button>
14            <Button variant={'outline'}>
15                <Cog />
16                Settings
17            </Button>
18            <Button variant={'outline'}>
19                <CloudDownload />
20                Download
21            </Button>
22        </ButtonGroup>
23    )
24}
25

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