Typography

Kbd

A keycap for shortcuts in text and menus.

On this page

Use .kbd on a <kbd> element for keys in running text, menus and hints. The default keycap is drawn with one contour so it stays quiet inside a line.

Kbd

PreviewCode

<p class="flex items-center gap-2xs m(0) text-sm fg-text-body">Search with  <kbd class="kbd">⌘</kbd>  <kbd class="kbd">K</kbd></p>

#Raised

kbd-raised catches the light like a physical key. Use it when the shortcut itself is the lesson.

Raised

PreviewCode

<kbd class="kbd kbd-raised">⇧</kbd><kbd class="kbd kbd-raised">⌘</kbd><kbd class="kbd kbd-raised">P</kbd>

#Classes

Class	Description
`kbd`	A keycap on a <kbd>, drawn with one half-pixel contour so it stays quiet inside a line
`kbd-raised`	A raised keycap that catches the light, for teaching a shortcut. With `kbd`

#Source

@master/ui/components/kbd.css

/* Kbd: a keycap drawn with one half-pixel contour. */@layer components {  .kbd {    display: inline-grid;    place-items: center;    min-width: 1.375rem;    height: 1.375rem;    padding: 0 .3125rem;    border-radius: calc(var(--radius-chip) * var(--corner-scale));    corner-shape: var(--corner-shape);    background: transparent;    color: var(--kbd-ink, var(--color-text-muted));    box-shadow: inset 0 0 0 .5px var(--kbd-line, var(--color-line-strong));    font: 400 .6875rem/1 var(--font-family-mono);    font-variant-ligatures: none;    vertical-align: middle;    /* Raised: a keycap that catches the light, for teaching a shortcut. */    &.kbd-raised {      @apply --surface-sheet;      color: var(--color-text-strong);      box-shadow: inset 0 1px 0 var(--color-highlight), inset 0 -1px 0 var(--color-line-hair), 0 0 0 .5px var(--color-line-strong), 0 1px 1px -.5px var(--color-shade-1), 0 2px 2px -1px var(--color-shade-2);    }    @media (forced-colors: active) {      outline: 1px solid CanvasText;      outline-offset: -1px;    }  }}