Typography

Kbd

Inline element that styles a single keystroke or shortcut sequence with the semantic kbd tag.

import { Kbd } from '@lostgradient/cinder/kbd';
shortcutinline
01

Overview

A styled keyboard key element for displaying keyboard shortcuts in help text and command palettes.

Usage

svelte 
<script lang="ts">
  import Kbd from '@lostgradient/cinder/kbd';
</script>

<Kbd label="⌘K" />
Live preview
02

When to use

Use when
  • Calling out a keyboard shortcut inline within prose or a tooltip.
  • Composing chorded shortcuts by rendering multiple kbd elements side by side.
Avoid when
  • Displaying a block of source code — use code-block instead.
03

Examples

Basic kbd

Single keys and key chords styled like physical keyboard keys.

04

Props

Props for kbd
NameTypeDefaultDescription
size 'sm' | 'md' 'md' Keyboard key size.
label text Key label content.
children snippet