--- title: Kbd desc: Kbd is used to display keyboard shortcuts. layout: components classnames: component: - class: kbd desc: Do show a keyboard key or a shortcut key size: - class: kbd-xs desc: Extra small size - class: kbd-sm desc: Small size - class: kbd-md desc: Medium size default: true - class: kbd-lg desc: Large size - class: kbd-xl desc: Extra large size --- ### ~Kbd K ```html K ``` ### ~Kbd sizes Xsmall Small Medium Large Xlarge ```html Xsmall Small Medium Large Xlarge ``` ### ~In text Press F to pay respects. ```html Press F to pay respects. ``` ### ~Key combination ctrl + shift + del ```html ctrl + shift + del ``` ### ~Function Keys ⌘ ⌥ ⇧ ⌃ ```html ⌘ ⌥ ⇧ ⌃ ``` ### ~A full keyboard

q w e r t y u i o p

a s d f g h j k l

z x c v b n m /

```html

q w e r t y u i o p

a s d f g h j k l

z x c v b n m /

``` ### ~Arrow Keys

▲

◀︎ ▶︎

▼

```html

▲

◀︎ ▶︎

▼

```