WebStableData display

Web only — React, from @krizaka/ui/kbd. Stable: its API only changes in a major version.

When to use

To show a shortcut next to the action it runs: a menu item, a palette, a tooltip.
In help text: “Press Esc to close”.

When not to use

For code or a value the user types: use <code>.
For a status or a count.Use instead: Badge

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Kbd } from "@krizaka/ui/kbd";

Examples

Key

A single key.

Esc

import { Kbd } from "@krizaka/ui/kbd";

export default function KbdKey() {
  return <Kbd>Esc</Kbd>;
}

Small

size="sm", in menus and footers.

Esc

import { Kbd } from "@krizaka/ui/kbd";

export default function KbdSmall() {
  return <Kbd size="sm">Esc</Kbd>;
}

Shortcut

A shortcut in a sentence.

Search with ⌘K

import { Kbd } from "@krizaka/ui/kbd";

// A shortcut in a sentence: one `Kbd` per key.
export default function KbdShortcut() {
  return (
    <p className="flex items-center gap-1.5 text-sm text-fg-secondary">
      Search with <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </p>
  );
}

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md"`	`md`	sm · md.

Accessibility

A <kbd> element: read as text. Spell out symbols a screen reader may skip (“Command K”) in the surrounding text when it matters.

Best practices

One Kbd per key: <Kbd>⌘</Kbd><Kbd>K</Kbd>, not <Kbd>⌘K</Kbd>.
Show the platform's modifier (⌘ on Apple, Ctrl elsewhere) when you know it.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Kbd