Kbd

Display keyboard button or keys combination.

Import

tsx
import { Kbd } from "@hope-ui/core";

tsx
import { Kbd } from "@hope-ui/core";

Usage

tsx
<span>
  <Kbd>shift</Kbd> + <Kbd>M</Kbd>
</span>

tsx
<span>
  <Kbd>shift</Kbd> + <Kbd>M</Kbd>
</span>

Guideline

All shortcuts should do their best to match what appears on the user’s keyboard.

• All single letters A-Z are uppercase.
• For non-letter keys such as enter, esc and shift, stick to lowercase.
• Use the arrow symbol as opposed to spelling things out.

Modifier

The only punctuation you should need is the + to indicate that a combination of keys will activate the shortcut.

tsx
<span>
  <Kbd>shift</Kbd> + <Kbd>M</Kbd>
</span>

tsx
<span>
  <Kbd>shift</Kbd> + <Kbd>M</Kbd>
</span>

For a sequence of keys where one must follow the other, write "then" in between. Stick to lowercase to match the non-letter keys.

tsx
<span>
  <Kbd>shift</Kbd> then <Kbd>M</Kbd>
</span>

tsx
<span>
  <Kbd>shift</Kbd> then <Kbd>M</Kbd>
</span>

If two different keys can execute the same action or the shortcut itself may look different on the user’s keyboard, write "or" in between.

tsx
<span>
  <Kbd>alt</Kbd> or <Kbd>option</Kbd>
</span>

tsx
<span>
  <Kbd>alt</Kbd> or <Kbd>option</Kbd>
</span>

Theming

Use the KbdTheme type to override Kbd styles and default props when extending Hope UI theme.

tsx
import { extendTheme, KbdTheme } from "@hope-ui/core";
const theme = extendTheme({
  components: {
    Kbd: {
      // ...overrides
    } as KbdTheme,
  },
});

tsx
import { extendTheme, KbdTheme } from "@hope-ui/core";
const theme = extendTheme({
  components: {
    Kbd: {
      // ...overrides
    } as KbdTheme,
  },
});

Component parts