Button

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/bases/radix/components/example"
5import { Button } from "@/registry/bases/radix/ui/button"
6import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
7 
8export default function ButtonExample() {
9  return (
10    <ExampleWrapper className="lg:grid-cols-1 2xl:grid-cols-1">
11      <ButtonVariantsAndSizes />
12      <ButtonIconRight />
13      <ButtonIconLeft />
14      <ButtonIconOnly />
15      <ButtonInvalidStates />
16      <ButtonExamples />
17    </ExampleWrapper>
18  )
19}
20 
21function ButtonVariantsAndSizes() {
22  return (
23    <Example title="Variants & Sizes">
24      <div className="flex flex-wrap items-center gap-2">
25        <Button size="xs">Default</Button>
26        <Button size="xs" variant="secondary">
27          Secondary
28        </Button>
29        <Button size="xs" variant="outline">
30          Outline
31        </Button>
32        <Button size="xs" variant="ghost">
33          Ghost
34        </Button>
35        <Button size="xs" variant="destructive">
36          Destructive
37        </Button>
38        <Button size="xs" variant="link">
39          Link
40        </Button>
41      </div>
42      <div className="flex flex-wrap items-center gap-2">
43        <Button size="sm">Default</Button>
44        <Button size="sm" variant="secondary">
45          Secondary
46        </Button>
47        <Button size="sm" variant="outline">
48          Outline
49        </Button>
50        <Button size="sm" variant="ghost">
51          Ghost
52        </Button>
53        <Button size="sm" variant="destructive">
54          Destructive
55        </Button>
56        <Button size="sm" variant="link">
57          Link
58        </Button>
59      </div>
60      <div className="flex flex-wrap items-center gap-2">
61        <Button>Default</Button>
62        <Button variant="secondary">Secondary</Button>
63        <Button variant="outline">Outline</Button>
64        <Button variant="ghost">Ghost</Button>
65        <Button variant="destructive">Destructive</Button>
66        <Button variant="link">Link</Button>
67      </div>
68      <div className="flex flex-wrap items-center gap-2">
69        <Button size="lg">Default</Button>
70        <Button size="lg" variant="secondary">
71          Secondary
72        </Button>
73        <Button size="lg" variant="outline">
74          Outline
75        </Button>
76        <Button size="lg" variant="ghost">
77          Ghost
78        </Button>
79        <Button size="lg" variant="destructive">
80          Destructive
81        </Button>
82        <Button size="lg" variant="link">
83// … truncated