PrimitivesEstável

Kbd

Relatório de paridade: docs/atoms.md

Um <kbd> estilizado (borda inferior de 2px) para mostrar uma tecla ou um atalho. size sm (padrão) ou md. Componha vários lado a lado para um atalho (⌘ K).

Quando usar

  • Documentar um atalho de teclado numa dica, num menu ("Buscar ⌘K"), numa página de ajuda.
  • Mostrar um trecho de código inline → um <code> comum. Um bloco de código → o realce de sintaxe da própria vitrine.

Exemplos

Um atalho
⌘Kabrir busca
<span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
  <span>abrir busca</span>
</span>
Tamanhos
EscEsc
<Kbd size="sm">Esc</Kbd>
<Kbd size="md">Esc</Kbd>

Playground

K
size
<Kbd>K</Kbd>

Props

PropTipopadrãoDescrição
size"sm" | "md"sm`sm` (default) · `md`.

Acessibilidade

  • Usa o elemento semântico <kbd>. É só apresentação — o atalho precisa estar de fato implementado no componente que ele documenta.