Kbd

SKbd shows one key of a keyboard shortcut. A known key name (meta, ctrl, shift, enter, escape, arrowup, … — case insensitive) is drawn as its symbol, any other text is shown as given. The symbols are the same everywhere: the shortcut has to match the one the application documents, and platform sniffing would make the server render something else than the browser. Since a symbol read on its own is an unknown glyph, a key rendered as one is announced by its name (⌘ as "meta").

Keys

⌘⇧↵⎋↑K

<template>
  <SKbd value="meta" />
  <SKbd value="shift" />
  <SKbd value="enter" />
  <SKbd value="K" />
</template>

Shortcut

A shortcut is several SKbd placed next to each other; any separator between them belongs to the application.

⌘K

<template>
  <SKbd value="meta" />
  <SKbd value="K" />
</template>

Sizes

⌃⌃⌃

<template>
  <SKbd
    size="sm"
    value="ctrl"
  />
  <SKbd
    size="lg"
    value="ctrl"
  />
</template>

Variants

⇥⇥⇥

<template>
  <SKbd
    variant="solid"
    value="tab"
  />
  <SKbd
    variant="subtle"
    value="tab"
  />
</template>

API

Props

Name	Type	Default	Description
value	string	undefined	Key to show. A known name (meta, ctrl, shift, enter, escape, arrowup, …, case insensitive) is rendered as its symbol and announced by its name; any other text is shown as given. Ignored when the default slot is filled.
size	"md" | "sm" | "lg"	"md"	Size: sm, md or lg.
variant	| "outline" | "solid" | "subtle"	"outline"	Visual variant: bordered outline, filled solid or tinted subtle.

Slots

Name	Description
default	Key content instead of value; it is rendered as given, without symbol mapping.