Kbd

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

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

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

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

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

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

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

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.

Related components

• CommandA command palette on cmdk: a search input over a filtered list of commands, inline or in a dialog.
• TooltipA short label shown on hover and on keyboard focus, next to its trigger.
• Dropdown menuA menu of actions opened from a trigger: items with icons, checkbox items, labels, separators, a destructive item.

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