Button

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