button

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/button/Button.astro directly.
3/**
4 * @component Button
5 * @title Button
6 * @description A clickable element for triggering actions or submitting forms.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2609-10438&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <div class="flex flex-wrap items-center gap-2 md:flex-row">
12 *   <Button>Button</Button>
13 *   <Button variant="outline" size="icon" aria-label="Submit">
14 *     <ArrowUpIcon />
15 *   </Button>
16 * </div>
17 *
18 * @usage
19 *
20 * ```astro nocollapse
21 * ---
22 * import { Button } from '@bejamas/ui/components/button';
23 * ---
24 *
25 * <Button>Click me</Button>
26 * ```
27 *
28 * ## Link
29 *
30 * You can use the `as` prop to render the component as an anchor.
31 *
32 * ```astro nocollapse
33 * ---
34 * import { Button } from '@bejamas/ui/components/button';
35 * ---
36 *
37 * <Button as="a" href="https://bejamas.com">Click me</Button>
38 * ```
39 *
40 * @examples
41 *
42 * ### Variants
43 *
44 * <div class="flex flex-col items-start gap-8 sm:flex-row">
45 *   <Button variant="default">Default</Button>
46 *   <Button variant="secondary">Secondary</Button>
47 *   <Button variant="outline">Outline</Button>
48 *   <Button variant="ghost">Ghost</Button>
49 *   <Button variant="destructive">Destructive</Button>
50 * </div>
51 *
52 * ### Sizes
53 *
54 * <div class="flex flex-col items-start gap-8 sm:flex-row">
55 *   <div class="flex items-start gap-2">
56 *     <Button size="sm" variant="outline">
57 *       Small
58 *     </Button>
59 *     <Button size="icon-sm" aria-label="Submit" variant="outline">
60 *       <ArrowUpRightIcon />
61 *     </Button>
62 *   </div>
63 *   <div class="flex items-start gap-2">
64 *     <Button variant="outline">Default</Button>
65 *     <Button size="icon" aria-label="Submit" variant="outline">
66 *       <ArrowUpRightIcon />
67 *     </Button>
68 *   </div>
69 *   <div class="flex items-start gap-2">
70 *     <Button variant="outline" size="lg">
71 *       Large
72 *     </Button>
73 *     <Button size="icon-lg" aria-label="Submit" variant="outline">
74 *       <ArrowUpRightIcon />
75 *     </Button>
76 *   </div>
77 * </div>
78 *
79 * ### With badge
80 *
81 * <Button variant="default">
82 *   Click me
83 *   <Badge variant="secondary">Value</Badge>
84 * </Button>
85 *
86 * ### Destructive
87 *
88 * <Button variant="destructive">Click me</Button>
89 *
90 * ### Outline
91 *
92 * <Button variant="outline">Click me</Button>
93 *
94 * ### Secondary
95 *
96 * <Button variant="secondary">Click me</Button>
97 *
98// … truncated