# Kbd

A key, written as on the keyboard, to say which one to press.

## Playground

```html
<kbd class="feitio-kbd">Esc</kbd>
```

## When to use

-   For shortcuts and keys in text: "press / to search".

## When not to use

-   **For code:** inline code.
-   **As the only way to do something:** the shortcut is an extra; the button stays.

## Examples

### Keys and combinations

One key per `<kbd>`; combinations with a plus sign between them.

Show code

```html
<kbd class="feitio-kbd">Ctrl</kbd> + <kbd class="feitio-kbd">K</kbd>
```

## Accessibility

-   It is a `<kbd>`: screen readers know it is a key.
-   Arrows and symbols: write the name out if it is the only text ("down arrow").

## Attributes

Attribute

Values

What for

`class="feitio-kbd"`

on the `<kbd>`

The key, with a slightly thicker bottom edge.