kbd

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/kbd/Kbd.astro directly.
3/**
4 * @component Kbd
5 * @title Kbd
6 * @description A visual indicator for keyboard keys and shortcuts, styled to match system keyboard key appearance.
7 * @status stable
8 *
9 * @preview
10 *
11 * <div class="flex flex-col items-center gap-4">
12 *   <KbdGroup>
13 *     <Kbd>⌘</Kbd>
14 *     <Kbd>⇧</Kbd>
15 *     <Kbd>⌥</Kbd>
16 *     <Kbd>⌃</Kbd>
17 *   </KbdGroup>
18 *   <KbdGroup>
19 *     <Kbd>Ctrl</Kbd>
20 *     <span>+</span>
21 *     <Kbd>B</Kbd>
22 *   </KbdGroup>
23 *   <KbdGroup>
24 *     <Kbd>⌘</Kbd>
25 *     <Kbd>K</Kbd>
26 *   </KbdGroup>
27 * </div>
28 *
29 * @usage
30 *
31 * ```astro nocollapse
32 * ---
33 * import { Kbd, KbdGroup } from '@bejamas/ui/components/kbd';
34 * ---
35 *
36 * <KbdGroup>
37 *   <Kbd>⌘</Kbd>
38 *   <Kbd>K</Kbd>
39 * </KbdGroup>
40 *
41 * <KbdGroup>
42 *   <Kbd>Ctrl</Kbd>
43 *   <span>+</span>
44 *   <Kbd>B</Kbd>
45 * </KbdGroup>
46 * ```
47 *
48 * @examples
49 *
50 * ### Group
51 *
52 * Use the `KbdGroup` component to group keyboard keys together.
53 *
54 * <div class="flex flex-col items-center gap-4">
55 *   <p class="text-muted-foreground text-sm">
56 *    Use{" "}
57 *     <KbdGroup>
58 *       <Kbd>Ctrl + B</Kbd>
59 *       <Kbd>Ctrl + K</Kbd>
60 *     </KbdGroup>{" "}
61 *     to open the command palette
62 *   </p>
63 * </div>
64 *
65 * ### Button
66 *
67 * Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.
68 *
69 * <Button variant="outline">
70 *   Accept <Kbd class="translate-x-0.5">
71 *     ⏎
72 *   </Kbd>
73 * </Button>
74 *
75 * ### Tooltip
76 *
77 * You can use the `Kbd` component inside a `Tooltip` component to display a tooltip with a keyboard key.
78 *
79 * <div class="flex flex-wrap gap-4">
80 *   <Tooltip>
81 *     <TooltipTrigger asChild>
82 *       <Button variant="outline">Save</Button>
83 *     </TooltipTrigger>
84 *     <TooltipContent class="pr-1.5">
85 *       <div class="flex items-center gap-2">
86 *         Save Changes <Kbd>S</Kbd>
87 *       </div>
88 *     </TooltipContent>
89 *   </Tooltip>
90 *   <Tooltip>
91 *     <TooltipTrigger asChild>
92 *       <Button variant="outline">Print</Button>
93 *     </TooltipTrigger>
94 *     <TooltipContent class="pr-1.5">
95 *       <div class="flex items-center gap-2">
96 *         Print Document <KbdGroup>
97 *           <Kbd>Ctrl</Kbd>
98 *           <Kbd>P</Kbd>
99 *         </KbdGroup>
100 *       </div>
101 *     </TooltipContent>
102 *   </Tooltip>
103 * </div>
104 *
105 * ### Input Group
106 *
107// … truncated