button-group-size-demo

1import { PlusIcon } from "lucide-react";
2
3import { Button } from "@/registry/pure-ui/ui/button";
4import { ButtonGroup } from "@/registry/pure-ui/ui/button-group";
5
6export function ButtonGroupSizeDemo() {
7  return (
8    <div className="flex flex-col items-start gap-8">
9      <ButtonGroup>
10        <Button variant="outline" size="sm">
11          Small
12        </Button>
13        <Button variant="outline" size="sm">
14          Button
15        </Button>
16        <Button variant="outline" size="sm">
17          Group
18        </Button>
19        <Button variant="outline" size="icon-sm">
20          <PlusIcon />
21        </Button>
22      </ButtonGroup>
23      <ButtonGroup>
24        <Button variant="outline">Default</Button>
25        <Button variant="outline">Button</Button>
26        <Button variant="outline">Group</Button>
27        <Button variant="outline" size="icon">
28          <PlusIcon />
29        </Button>
30      </ButtonGroup>
31      <ButtonGroup>
32        <Button variant="outline" size="lg">
33          Large
34        </Button>
35        <Button variant="outline" size="lg">
36          Button
37        </Button>
38        <Button variant="outline" size="lg">
39          Group
40        </Button>
41        <Button variant="outline" size="icon-lg">
42          <PlusIcon />
43        </Button>
44      </ButtonGroup>
45    </div>
46  );
47}