Kbd

Keyboard key cap for showing shortcuts. Size prop: xs, sm, md, lg, xl.

Jump to API reference

Import

Vue
import { UiKbd } from '@ziyarago/ui/vue'

Sizes

CtrlCtrlCtrlCtrlCtrl
Vue
<UiKbd size="xs">
  Ctrl
</UiKbd>

<UiKbd size="sm">
  Ctrl
</UiKbd>

<UiKbd size="md">
  Ctrl
</UiKbd>

<UiKbd size="lg">
  Ctrl
</UiKbd>

<UiKbd size="xl">
  Ctrl
</UiKbd>

Keys

CtrlKEscEnter
Vue
<UiKbd>
  Ctrl
</UiKbd>

<UiKbd>
  K
</UiKbd>

<UiKbd>
  Esc
</UiKbd>

<UiKbd>
  Enter
</UiKbd>

Single

⌘
Vue
<UiKbd>
  ⌘
</UiKbd>

API reference

Keyboard key cap for shortcuts such as Ctrl or K.

Props

PropType and valuesDefaultDescription
sizexssmmdlgxl'md'Key cap size.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultKey label.

Notes

  • Render one Kbd per key and combine them in a row for chords.