Skip to content
Tattva

Kbd

Stable

A small key label, such as Tab or Esc, that shows which key to press.

Also known as key hint, keyboard key, keyboard shortcut, shortcut hint

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Single keys

Press Esc to close

Put the label next to the action it triggers.

UsageCodeDesignAccessibility

When to use it

A small key label, such as Esc or Tab, set beside the action it triggers. It is only a hint: the action must also work without the key.

Made of: Key label

Use it for

  • Beside a menu item or button that also has a keyboard shortcut.
  • In help text that explains how to move around with the keyboard.
  • Each key of a combination, one label per key.

Not for

  • Something people click: use Button.
  • Labels that are not keyboard keys: use Badge.

Do and avoid

Press Esc to close

Do. The key and what it does are shown together.

Ctrl + K

Avoid. Keys alone do not say what will happen when pressed.

Do

  • Put it beside words that name the action.
  • Use one label per key in a combination.
  • Make every shortcut also work with a mouse or tap.
  • Use short names such as Esc and Tab.

Avoid

  • Do not use it as a button. It does nothing when clicked.
  • Do not show it on touch-only screens.
  • Do not use it alone. Say what the key does.
  • Do not use it for hints that are not about the keyboard.

On a phone

  • It is a small label for a keyboard key, and keyboard shortcuts do not apply on a phone, so hide it there or show it only where a keyboard is likely.
  • Its text is 12px on a touch screen.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started