WebStableAffichage de données

Web uniquement — React, depuis @krizaka/ui/kbd. Stable : son API ne change qu’à une version majeure.

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@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

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

Importer

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

Exemples

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	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 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.

Générée depuis le code de @krizaka/ui 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Kbd