Kbd

Keyboard shortcut display chip. Use for showing keyboard combinations like ⌘K or Ctrl+Shift+P.

typography v0.7.0

Playground

Examples

Single key

<cg-kbd keys="⌘K"></cg-kbd>

Multi-key

<cg-kbd keys="⇧,⌘,P"></cg-kbd>

Slot content

Esc

<cg-kbd>Esc</cg-kbd>

Sizes (sm / md / lg)

<cg-stack direction="row" gap="md" align="center"><cg-kbd size="sm" keys="⌘,K"></cg-kbd><cg-kbd size="md" keys="⌘,K"></cg-kbd><cg-kbd size="lg" keys="⌘,K"></cg-kbd></cg-stack>

Inline in copy

Press to open the command palette, or to jump to a file.

<cg-text size="sm">Press <cg-kbd keys="⌘,K" size="sm"></cg-kbd> to open the command palette, or <cg-kbd keys="⇧,⌘,P" size="sm"></cg-kbd> to jump to a file.</cg-text>

Outline variant

<cg-stack direction="row" gap="md"><cg-kbd keys="Ctrl,C" variant="outline"></cg-kbd><cg-kbd keys="Ctrl,V" variant="outline"></cg-kbd><cg-kbd keys="Ctrl,Z" variant="outline"></cg-kbd></cg-stack>

Import

import { CgKbd } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-kbd';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`keys`	string	""	Comma-separated keys (renders with + separators)
`size`	"sm" \| "md" \| "lg"	"md"	Size
`variant`	"default" \| "outline"	"default"	Visual style