Kbd

Kbd options
Choice	Values	Default	What it does
`sizesmbk-kbd--size-<value>`	`lgmdsm`	`lg`	Figma calls these Large, Medium and Small.

A raised keycap per key.

⌘K

Three sizes.

⌘⌘⌘

A keycap grows to fit a word.

EscEnter

A whole shortcut in one keycap, a space between the keys, as the search field's hint shows it.

⌘ K⌘ K⌘ K

Purpose

A keyboard key, drawn as a small raised keycap, for showing shortcuts in menus, tooltips, search fields and help text. It is the one place a single character is set in the label face at a fixed height.

When to use

A shortcut beside a menu item or in a tooltip.
A sequence of keys in help text, one keycap per key.

When not to use

For a badge or a tag that happens to be small. Those have their own components.
For a button. A keycap is not pressed.

Usage rules

Do

In help text, use one keycap per key and write the joining plus sign outside them.
Where one keycap stands for a whole shortcut, as in the search field's key hint, put a space between the keys: "⌘ K".

Don't

Put an icon in a keycap. The Phosphor set has no key glyphs, and the label face is the design.

⌘+Shift+P

In help text, give each key its own keycap and write the plus outside, so each key reads on its own.

⌘+Shift+P

Don't

A whole combination crammed into one keycap is hard to read in running help text.

⌘Esc

Write the key's symbol or name in the keycap, so it matches the lettering of every other key.

Don't

An icon in a keycap breaks the set, because no icon matches the keyboard's own lettering.

Anatomy

One element, the keycap, holding the key's symbol or name. Its height is fixed by the size; its width is the text plus the side padding, so it is near square for one character and grows to fit a word or a shortcut.

Behavior

None.

What it does for you

It is a real keyboard element, which assistive technology announces as keyboard input.
It takes no focus and no keys, since a keycap is not pressed.

What you must do

Give a symbol such as the command glyph a readable name through a title or surrounding text, because a symbol alone may be read as nothing.

How to test

With a screen reader, read a shortcut: each key is read as keyboard input, and a symbol is read by its name.
With text at 200% and the page 320 pixels wide, each keycap's text stays whole.
In a forced-color mode, the key's text stays visible.

The files the kbd is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.

Stylesheet

kbd.css

/* smbk-kbd — Kbd. Figma "Kbd" 888:8. A raised keycap.
 * Its height is a display size step; its width hugs the key text and the side
 * padding, so one glyph gives a near-square cap and a word or a shortcut
 * widens it. */

/* An inline flex box: the key's line is centered in the fixed height, inside the hairline edge. */
.smbk-kbd {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--smbk-size-mark-lg);
  padding: 0 var(--smbk-space-inset-sm);
  text-align: center;
  border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-rim-subtle);
  border-radius: var(--smbk-radius-control-xs);
  background: var(--smbk-color-surface-raised);
  color: var(--smbk-color-text-subtle);
  box-shadow: var(--smbk-elevation-raised);
  font-family: var(--smbk-typography-code-md-font-family);
  font-size: var(--smbk-typography-code-md-font-size);
  font-weight: var(--smbk-typography-code-md-font-weight);
  line-height: var(--smbk-typography-code-md-line-height);
  letter-spacing: var(--smbk-typography-code-md-letter-spacing);
  white-space: nowrap;
}

/* Keys are set in the code face, as Figma's Code styles: Code MD on the large key, Code SM on the others. */
.smbk-kbd--size-md,
.smbk-kbd--size-sm {
  font-family: var(--smbk-typography-code-sm-font-family);
  font-size: var(--smbk-typography-code-sm-font-size);
  font-weight: var(--smbk-typography-code-sm-font-weight);
  line-height: var(--smbk-typography-code-sm-line-height);
  letter-spacing: var(--smbk-typography-code-sm-letter-spacing);
}

/* Each size has its own height; the line stays centered in it. */
.smbk-kbd--size-md {
  height: var(--smbk-size-mark-md);
}

.smbk-kbd--size-sm {
  height: var(--smbk-size-mark-sm);
  padding: 0 var(--smbk-space-inset-xs);
}

Tokens it reads

Kbd tokens
Token and CSS	Value	Preview	Foundation
size.mark.lg--smbk-size-mark-lg	24px		Size
space.inset.sm--smbk-space-inset-sm	comfortable: 6pxcompact: 4pxchanges with density		Spacing
border-width.hairline--smbk-border-width-hairline	1px		Border width
color.border.rim-subtle--smbk-color-border-rim-subtle	light: #ffffff33dark: #ffffff08changes with theme		Color
radius.control.xs--smbk-radius-control-xs	2px		Radius
color.surface.raised--smbk-color-surface-raised	light: #f9fafbdark: #232527changes with theme		Color
color.text.subtle--smbk-color-text-subtle	light: #4e555edark: #9ba5b1changes with theme		Color
elevation.raised--smbk-elevation-raised	light: 0px 2px 8px 1px #373d431a, 0px 1px 2px 0px #373d431adark: 0px 2px 8px 1px #00000026, 0px 1px 2px 0px #00000026		Elevation
typography.code-md--smbk-typography-code-md-font-family--smbk-typography-code-md-font-size--smbk-typography-code-md-font-weight--smbk-typography-code-md-line-height--smbk-typography-code-md-letter-spacing--smbk-typography-code-md-text-transform	fontFamily: Geist Mono, Geist Mono Fallback, ui-monospace, monospacefontSize: 14pxfontWeight: 400lineHeight: 1.6letterSpacing: 0px	The quick brown fox	Typography
typography.code-sm--smbk-typography-code-sm-font-family--smbk-typography-code-sm-font-size--smbk-typography-code-sm-font-weight--smbk-typography-code-sm-line-height--smbk-typography-code-sm-letter-spacing--smbk-typography-code-sm-text-transform	fontFamily: Geist Mono, Geist Mono Fallback, ui-monospace, monospacefontSize: 12pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
size.mark.md--smbk-size-mark-md	20px		Size
size.mark.sm--smbk-size-mark-sm	16px		Size
space.inset.xs--smbk-space-inset-xs	4px		Spacing

Manifest

kbd.manifest.json

{
  "name": "kbd",
  "block": "smbk-kbd",
  "summary": "A keyboard key: a small raised square with the key's symbol in the label face.",
  "adapt": "css",
  "axes": {
    "size": {
      "values": [
        "lg",
        "md",
        "sm"
      ],
      "default": "lg",
      "description": "Figma calls these Large, Medium and Small."
    }
  },
  "flags": {},
  "parts": [],
  "figmaNodeId": "888:8"
}

Menu

Customize the preview

Options

Examples

Usage

Sizes

Words

A shortcut in one keycap

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Source