General

Kbd

Render keyboard keys with platform-aware symbol conversion. Supports special keys like Command, Shift, and arrow keys with automatic symbol display.

Playground

Experiment with different props in real-time.

K

Value

Variant

Size

Color

Basic Usage

Use the value prop to display a key. Special keys are automatically converted to symbols.

K ⇧ ⌘ ↵

<script lang="ts">
  import { Kbd } from 'sv5ui';
</script>

<Kbd value="K" />
<Kbd value="shift" />
<Kbd value="command" />
<Kbd value="enter" />

Variants

Choose from 4 visual styles.

K Outline

K Solid

K Soft

K Subtle

<Kbd value="K" variant="outline" />
<Kbd value="K" variant="solid" />
<Kbd value="K" variant="soft" />
<Kbd value="K" variant="subtle" />

Sizes

Available in 3 sizes.

K SM

K MD

K LG

<Kbd value="K" size="sm" />
<Kbd value="K" size="md" />
<Kbd value="K" size="lg" />

Colors

Customize the color scheme with the color prop.

K K K K K K K

<Kbd value="K" color="surface" />
<Kbd value="K" color="primary" />
<Kbd value="K" color="secondary" />
<Kbd value="K" color="success" />
<Kbd value="K" color="warning" />
<Kbd value="K" color="error" />
<Kbd value="K" color="info" />

Keyboard Shortcuts

Compose multiple keys to display shortcuts.

⌘ + K

Ctrl + ⇧ + P

Alt + ↵

<!-- Common shortcuts -->
<div class="flex items-center gap-1">
  <Kbd value="command" /> + <Kbd value="K" />
</div>

<div class="flex items-center gap-1">
  <Kbd value="ctrl" /> + <Kbd value="shift" /> + <Kbd value="P" />
</div>

<div class="flex items-center gap-1">
  <Kbd value="alt" /> + <Kbd value="enter" />
</div>

Special Keys

Special key names are automatically converted to their symbols.

⌘ command

⇧ shift

⌥ option

⌃ control

↵ enter

⌫ backspace

⇥ tab

Esc escape

↑ arrowup

↓ arrowdown

← arrowleft

→ arrowright

<Kbd value="command" />  <!-- ⌘ -->
<Kbd value="shift" />    <!-- ⇧ -->
<Kbd value="option" />   <!-- ⌥ -->
<Kbd value="control" />  <!-- ⌃ -->
<Kbd value="enter" />    <!-- ↵ -->
<Kbd value="backspace" /> <!-- ⌫ -->
<Kbd value="tab" />      <!-- ⇥ -->
<Kbd value="escape" />   <!-- Esc -->
<Kbd value="arrowup" />  <!-- ↑ -->
<Kbd value="arrowdown" /> <!-- ↓ -->
<Kbd value="arrowleft" /> <!-- ← -->
<Kbd value="arrowright" /> <!-- → -->

useKbd Hook

Press Ctrl + K to trigger search (see code below)

<script lang="ts">
  import { useKbd } from 'sv5ui';

  const { isPressed } = useKbd({
    shortcuts: {
      'ctrl+k': () => openSearch(),
      'meta+s': () => save(),
      'escape': () => close()
    }
  });
</script>

Props

Prop	Type	Default
`value`	`string`	`-`
`variant`	`'solid' \| 'outline' \| 'soft' \| 'subtle'`	`'outline'`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`color`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'surface'`	`'surface'`
`as`	`keyof HTMLElementTagNameMap`	`'kbd'`
`class`	`string`	`-`

Link ThemeModeButton