Composants
Kbd
A key or a keyboard shortcut, set as keys: one Kbd per key.
Web uniquement — React, depuis @krizaka/ui/kbd. Stable : son API ne change qu’à une version majeure.
Pourquoi il est là. Used by Orazaka, krizaka.com.
Quand l’utiliser
- To show a shortcut next to the action it runs: a menu item, a palette, a tooltip.
- In help text: “Press Esc to close”.
Quand ne pas l’utiliser
- For code or a value the user types: use
<code>. - For a status or a count.À la place : Badge
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Kbd } from "@krizaka/ui/kbd";Exemples
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 | Défaut | Description |
|---|---|---|---|
size | "sm" | "md" | md | sm · md. |
Accessibilité
- A
<kbd>element: read as text. Spell out symbols a screen reader may skip (“Command K”) in the surrounding text when it matters.
Bonnes pratiques
- 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.
Composants liés
Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub