Pular para o conteúdo
PrivateLab Design System

Kbd

Mostra uma tecla ou atalho de teclado, como Esc ou ⌘ K.

O componente Kbd desenha uma tecla (ou combinação) no texto e nos menus. Não confunda com o <Kbd> usado nas próprias páginas desta documentação, que é só uma ajuda de escrita MDX. Use o Kbd do design system em ajudas de atalho, em Dropdown e em rótulos de campos de busca.

import { Kbd } from "@rastreio-x/ui";

Padrão

Kbd.Abbr com keyValue desenha o símbolo da tecla modificadora (⌘, ⇧, ⌃). Kbd.Content leva o texto da tecla.

Variantes

default tem fundo; light é mais leve, usada dentro de itens de menu.

Teclas de navegação

Setas, Home, End, PageUp e PageDown vêm prontas em keyValue.

Dentro de um texto

O Kbd acompanha o tamanho do texto e fica ao lado da instrução.

Em um menu

O Dropdown mostra atalhos à direita do item com slot="keyboard"; veja o exemplo na página de Dropdown.

Anatomia

  • Kbd.Abbr: o símbolo da tecla modificadora, com title acessível.
  • Kbd.Content: o texto da tecla.

Propriedades

Kbd:

Kbd.Abbr:

Animações

O Kbd é estático e não anima.

Acessibilidade

  • Renderiza <kbd>, que leitores de tela anunciam como entrada de teclado.
  • Kbd.Abbr é um <abbr> com title ("Command"); não dependa só do símbolo para dizer a tecla.
  • Atalho só decorativo em um item de menu não substitui o item: o atalho precisa funcionar de verdade.
  • Contraste do texto da tecla acima de 4,5:1 sobre o fundo.

Boas práticas

Faça

Mostrar o atalho ao lado do nome da ação e mencionar a alternativa para Windows (Ctrl).

Evite

Usar Kbd para decorar texto, ou mostrar atalhos que não existem.
  • O símbolo ⌘ vale para macOS; em Windows e Linux mostre ctrl.
  • Prefira uma tecla ou duas; combinações longas viram texto.
  • Em menus, use variant="light" e className="ms-auto" para alinhar à direita.

Relacionados