Kbd

A key or a shortcut, shown as it is on a keyboard.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Kbd-0.tess

<template>
  <p>Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to search, or <Kbd size="sm">Esc</Kbd> to close.</p>
</template>

Installation

CLIManual

npmpnpmyarnbun

npx @pixelscriptio/tessera add Kbd

pnpm exec tessera add Kbd

yarn tessera add Kbd

bunx @pixelscriptio/tessera add Kbd

Works with Tessera 0.9.0 or newer.

Copy and paste the code into your project

Put it in system/components.

system/components/Kbd.tess

<contract>
{
  "name": "Kbd",
  "role": "generic",
  "description": "A key or a shortcut, shown as it is on a keyboard.",
  "since": "0.8.0",
  "parts": ["root"],
  "variants": {
    "size": ["md", "sm"] // first value is the default
  },
  "slots": {
    "default": "the key, such as Ctrl or K"
  },
  "preview": {
    "slots": {
      "default": "K"
    }
  }
}
</contract>

<template>
  <kbd class="root"><slot /></kbd>
</template>

<style>
.root {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: $space.6;
  padding: $space.0-5 $space.2;
  border: 1px solid $color.border.default;
  border-radius: $radius.sm;
  background: $color.surface.raised;
  color: $color.text.default;
  font-family: var(--t-font-family-mono);
  font-size: $font.size.sm;

  &[data-size='sm'] {
    min-width: $space.5;
    padding: 0 $space.1;
    font-size: $font.size.sm;
  }
}
</style>

Check your design tokens
Your design system needs these. tessera add reports the ones that are missing; by hand, run npx @pixelscriptio/tessera check.
color.border.default color.surface.raised color.text.default font.size.sm radius.sm space.0-5 space.1 space.2 space.5 space.6

Usage

Using Kbd

A key or a shortcut, shown as it is on a keyboard.

Put one key in each Kbd, and join a shortcut with plain text: Ctrl + K.
Use the real key name the person sees, such as Esc or Enter, and spell it the way the platform does.
size="sm" fits inside a line of text or a menu item.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Kbd-0.tess

<template>
  <p>Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to search, or <Kbd size="sm">Esc</Kbd> to close.</p>
</template>

API reference

Variants

Variant	Values
`size`	`md` default `sm`

Slots

Slot	Content
`default`	the key, such as Ctrl or K

Anatomy


Role	`generic`
Parts	`root`
Since	0.8.0

Design tokens it uses

Your design system needs these. tessera add checks that it has them, and can add the ones it lacks.

color.border.default color.surface.raised color.text.default font.size.sm radius.sm space.0-5 space.1 space.2 space.5 space.6

Checksum

e1280ad24d5519edb828fa509a58503c8edb6a354d7fac3cc0cae633dccce298

Kbd