Kbd

Render one or more keys as a compact keycap for shortcuts like ⌘K or Ctrl + S. Pure display, emitting a semantic <kbd> element.

Playground

⌘+K

Size

Keys (comma-separated)

Separator

<script lang="ts">
  import { Kbd } from '@urbicon-ui/blocks';

  const keys = ['⌘', 'K'];
</script>

<Kbd
  {keys}
/>

Pass a string to keys for a single keycap. Symbols like ⌘, ⇧ and ⌥ render as-is, and spelled-out names cover the keys that have no glyph.

⌘K Esc Enter Tab

<Kbd keys="⌘K" />
<Kbd keys="Esc" />
<Kbd keys="Enter" />
<Kbd keys="Tab" />

An array shows several keys in one keycap, joined by the separator (default +). Reach for it when a shortcut uses more than one key.

Ctrl+K ⌘+⇧+P

<Kbd keys={['Ctrl', 'K']} />
<Kbd keys={['⌘', '⇧', 'P']} />

Kbd is inline and vertically centered on the text, so it reads naturally inside running copy or a tooltip.

Press / to search, or ⌘+K for the command palette.

<p>Press <Kbd keys="/" size="sm" /> to search, or <Kbd keys={['⌘', 'K']} size="sm" /> for the command palette.</p>

Renders a semantic <kbd> element, the native HTML tag for keyboard input. It is presentational, so no explicit role is added.

Every key is visible text, so screen readers read the shortcut exactly as it is shown.

Kbd never receives focus and has no interactive behaviour of its own. Wire the actual shortcut on the element it describes.

10 props

Prop	Type	Default	Description
`children`	`Snippet`	—	Custom content; overrides `keys`.
`class`	`string`	—	Additional CSS class merged onto the root `<kbd>`.
`keys`	`string \| string[]`	—	The key(s) to display. A single string renders one label; an array renders each entry joined by `separator` (e.g. `['Ctrl', 'K']` → `Ctrl + K`). Ignored when `children` is provided.
`preset`	`string`	—	Apply a named preset registered via `<BlocksProvider presets={{ Kbd: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic palette — presets keep dark-mode logic coherent and reusable.
`separator`	`string`	`'+'`	Separator rendered between multiple `keys`.
`size`	smmdlg	—	Keycap size — sm, md (default), lg.
`slotClasses`	`Partial<Record<KbdSlots, string>>`	—	Per-slot class overrides. Slots: base \| separator
`unstyled`	`boolean`	—	Strip all default styles; combine with slotClasses to rebuild from scratch.
`...HTMLAttributes<HTMLElement>` inherited	`HTMLAttributes`	—	HTML attributes (excluding: 'children' \| 'class')
`...KbdVariants` variant	`VariantProps`	—	Styling variants from KbdVariants

Local type definitions used by this component.

3 types

Only referenced

Name	Kind	Category	Used by	Description
KbdProps	interface	props	0	—
KbdVariants	type	variant	1	—
KbdSlots	type	variant	0	Slot names derived from the `tv()` config above — single source of truth for `slotClasses`.

import { Kbd } from '@urbicon-ui/blocks';