Skip to Content
ComponentsAtomsKeyboard Shortcut

Keyboard Shortcut

Atom

KBD mostra uma tecla ou combinação de teclas. Ele documenta acesso rápido, não substitui label, botão ou instrução visível.

Use KBD para atalhos em command palettes, tooltips, menus e documentação. Em operação de crise, atalhos precisam ser previsíveis, acessíveis e equivalentes às ações visíveis na interface.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoKbdProps = {
  keys: string[]
  label?: string
}
 
export function PulsoKbd({ keys, label }: PulsoKbdProps) {
  return (
    <kbd
      aria-label={label ?? keys.join(" ")}
      className="inline-flex items-center gap-1 rounded-[var(--radius-xs)] border border-[var(--border)] bg-[var(--muted)] px-1.5 py-0.5 font-mono text-[11px] font-semibold leading-none text-[var(--fg-muted)] shadow-[inset_0_-1px_0_var(--border)]"
    >
      {keys.map((key, index) => (
        <React.Fragment key={`${key}-${index}`}>
          {index > 0 ? <span className="text-[var(--fg-subtle)]">+</span> : null}
          <span>{key}</span>
        </React.Fragment>
      ))}
    </kbd>
  )
}
<PulsoKbd keys={["⌘", "K"]} label="Command K" />
<PulsoKbd keys={["⌥", "Enter"]} label="Option Enter" />

Quando usar

  • Atalhos de command palette.
  • Menus com ações repetidas.
  • Tooltips de controles compactos.
  • Documentação de keyboard map por componente.

Quando não usar

  • Para substituir botão ou link.
  • Para esconder uma ação sem equivalente clicável.
  • Para decorar texto técnico.
  • Para atalhos que não funcionam de fato.

Acessibilidade

  • A ação precisa existir sem teclado também.
  • Use aria-label quando o símbolo não for lido claramente.
  • Atalhos globais devem ser documentados e não conflitar com navegador/SO.
  • Não use apenas KBD para comunicar estado.

Regras

  1. Atalho mostrado precisa funcionar.
  2. Combine no máximo 3 teclas por hint.
  3. Use símbolos conhecidos (⌘, ⌥, ⇧) com label acessível.
  4. Atalho acelera; não bloqueia o fluxo sem mouse/touch.
  5. Em mobile, substitua por gesto ou ação visível equivalente.
Last updated on
KickerLabel