Kbd

import { Flex } from "@hel/ui/flex"
import { Kbd } from "@hel/ui/kbd"

When to use it#

Use a Kbd to tell people about a key: the shortcut next to a menu item, the "Esc to close" under a dialog, a line of help that says which key does what. It is a hint and does nothing when pressed.

Menu items, buttons and the command palette already show their own shortcuts, so you do not need to place a Kbd there by hand. To make a shortcut work, see Hotkeys.

Import#

Copyimport { Kbd } from "@hel/ui/kbd"

Usage#

Write the key as the children. command and shift add the ⌘ and ⇧ icons in front of it.

Copy<Kbd>Esc</Kbd>
<Kbd command>K</Kbd>
<Kbd>Ctrl + B</Kbd>

Examples#

Shortcuts for the current platform#

Pass hotkey instead of writing the label, and the key is shown for the person's own system: ⌘ on a Mac, Ctrl elsewhere. The same "Mod+K" you bind with becomes the right label on both.

import { Flex } from "@hel/ui/flex"
import { Kbd } from "@hel/ui/kbd"
import { Stack } from "@hel/ui/stack"

hotkey only shows the key. To make it work, give the same value to the component it belongs to, or use Hotkeys.

An app can hide all shortcut hints with shortcuts.visible: false in its config, for example on touch devices. A Kbd you write inside a sentence is documentation and should stay, so give it visible.

Variants#

variant is for the look of the key against its surroundings. The components that draw their own hints choose it from their state: disabled in a disabled item, destructive in a delete item, solid on a filled button, muted in a sidebar row. You rarely need to set one.

import { Flex } from "@hel/ui/flex"
import { Kbd } from "@hel/ui/kbd"
import { Stack } from "@hel/ui/stack"

Props#

Kbd#

When both children and hotkey are given, children is shown.