Kbd

Keyboard shortcut badge. Displays key combinations with Storm's border signature. 3 sizes.

Usage

tsx

1import { Kbd } from '@storm-ds/ui'
2
3<Kbd>Cmd</Kbd>
4<Kbd>K</Kbd>

Sizes

sm⌘ K

md⌘ K

lg⌘ K

Key Combinations

⌘ KCtrl Shift PAlt F4

tsx

1<div className="space-x-2">
2  <Kbd>Cmd</Kbd>
3  <span>+</span>
4  <Kbd>K</Kbd>
5</div>

Common Keys

EscTabEnterSpaceDelete

tsx

1<Kbd>Enter</Kbd>
2<Kbd>Esc</Kbd>
3<Kbd>Tab</Kbd>
4<Kbd>Shift</Kbd>

With Text

Press ⌘ K to open the command palette, or Esc to close it.

tsx

1Press <Kbd size="sm">Ctrl</Kbd> + <Kbd size="sm">C</Kbd> to copy

Props

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Badge size
className	string	-	Custom classes
children	React.ReactNode	-	Key text or symbol

Use with AI

Create a Next.js component using Storm UI's Kbd for displaying keyboard shortcuts. Import: `import { Kbd } from '@storm-ds/ui'`. Sizes: sm, md, lg. Displays keyboard key badges with Storm's border signature style. Use for displaying keyboard shortcuts, command palettes, and help documentation. Example: `<Kbd>Cmd</Kbd>`, `<Kbd size="sm">Enter</Kbd>`, keyboard combinations like `<Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>`

Empty

Typography