#Kbd

Shows a keyboard shortcut as a <kbd> cap. It is display-only — the DS binds nothing, so the keydown handler stays yours — and Code is the one to reach for when what you are showing is a value rather than a key. One cap holds one key and KbdGroup sets out a combination; render the modifier symbols (⌘, ⇧, ⌥, ↵) rather than the words, so the same shortcut reads the same everywhere.

Source · Storybook

#Usage

import { Kbd } from '@wallarm-org/design-system/Kbd';

#Examples

#Group

KbdGroup lays a combination out one cap per key: modifiers on their own above, and a two-key chord below where the + is plain text between the caps.

#Sizes

small beside medium. Match the cap to the density of the text around it rather than to what looks best on its own.

#With tooltip

Inside a Tooltip the cap restyles itself for the inverted surface, so a shortcut hint needs nothing special from you.

#Props