Kbd
A keyboard key for shortcuts in menus, tooltips and hint lines, paired with code for inline code.
When to use
Section titled “When to use”- Use it for menu item shortcuts, the ⌘K launcher and the “Enter to send” hint. Use inline
codefor versions, model ids and commands in prose.
What the consumer provides
Section titled “What the consumer provides”- The key label: a symbol (⌘, ⇧) or a word (Enter, Esc). A group of keys is separate
Kbdelements withspace-1between them. Do not add a “+” sign.
Behaviour
Section titled “Behaviour”- 22px,
code-sm,surface-100,border-strongwith a 2px bottom edge,radius-xs. It is never clickable.
Tokens
Section titled “Tokens”surface-100, surface-200, border-strong, ink, radius-xs.
Mantine
Section titled “Mantine”<Kbd size="xs">⌘</Kbd>. Use inline <Code> for code.