# Kbd A key on a keyboard, set as one. - Group: Display - Import: `import { Kbd } from '@misoto22/design'` - Page: https://ui.misoto22.com/components/kbd/ - Related: badge ## Anatomy - **Key** (required) — The : a --rule-2 hairline on the --radius-sm corner, min-w-[1.6em] so a single character is a cap rather than a sliver, and 0.8em type so the whole cap scales with the copy around it. - **Legend** (required) — children, printed verbatim. One key per element — the space between two of them is a real space in the markup, not a separator the component draws. ## Best practices ### Do - Write one Kbd per key. A whole chord in one box — ⌘K — is a single cap with two glyphs in it, and the min-w-[1.6em] that makes one character square just stretches to hold both. - Let it take its size from its surroundings: it is set in em, so the same shortcut printed in a heading and in body copy comes out right in both. Pinning it to px is how one shortcut ended up three sizes on one page. - Give a glyph-only key an aria-label — ⌘, ⌥ and ⇧ are read out as their Unicode names or skipped entirely, so a Mac shortcut written in symbols alone is a silent instruction. ### Don’t - An outline Badge and a Kbd are near enough identical on screen, so the choice between them is entirely about meaning: says the reader presses this, and a badge shaped like a key invites a press nothing answers. - Nothing here binds anything. The element is typography, so a key printed for a shortcut no handler listens for is documentation of a feature the page does not have. ## Accessibility - Renders , which carries the meaning a styled does not. ## Kbd A key on a keyboard, set as one. Renders a ``, which is the element that means this — a `` styled to look like a key tells a screen reader nothing. Sized in `em` so it tracks whatever type it sits beside rather than fixing itself at one px value, which is how the same shortcut ended up three different sizes across a page. ### Props - `children` (required) — `ReactNode`. Also accepts: `HTMLAttributes`. ## Example — default ```tsx import { Kbd } from '@misoto22/design' Press ⌘ K to open the palette, or Esc to close it. ``` ## Example — one cap per key ```tsx import { Kbd, Text } from '@misoto22/design' Reformat the file with ⌘{' '} ⇧ P. On Windows and Linux the same chord is Ctrl Shift P. ``` ## Example — sized by its copy ```tsx import { Heading, Kbd, Text } from '@misoto22/design' Press / to search The same / works from anywhere on the page. Shortcut: / ```