Components
Kbd
A key or a keyboard shortcut, set as keys: one Kbd per key.
Web only — React, from @krizaka/ui/kbd. Stable: its API only changes in a major version.
Why it is here. Used by Orazaka, krizaka.com.
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 @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { Kbd } from "@krizaka/ui/kbd";Examples
Key
A single key.
Esc
Small
size="sm", in menus and footers.
Esc
Shortcut
A shortcut in a sentence.
Search with ⌘K
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
Kbdper 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
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub