Kbd

Apresentação

O componente Kbd é responsável por exibir teclas de teclado ou atalhos de forma estilizada. É útil para documentar atalhos de teclado, comandos ou instruções que envolvem interação com o teclado.

Quando usar

• Para mostrar atalhos de teclado
• Para documentar comandos
• Para exibir instruções de teclado
• Para destacar teclas específicas
• Para criar guias de referência
• Para indicar combinações de teclas

Forma básica de uso

import { Kbd } from 'eitri-luminus';

// Tecla única
<Kbd>Ctrl</Kbd>

// Combinação de teclas
<p>
  Pressione <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> para copiar
</p>

// Com classes personalizadas
<Kbd className="text-primary">Enter</Kbd>

// Múltiplas teclas
<p>
  Use <Kbd>Alt</Kbd> + <Kbd>Tab</Kbd> para alternar entre janelas
</p>

Propriedades

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o componente
id	string	Identificador único do componente

Heranças

O componente Kbd herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'kbd' para estilização base
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Ideal para documentação técnica e guias de usuário
• Mantém a semântica HTML usando a tag <kbd>
• Recomenda-se usar para destacar interações com o teclado
• Pode ser combinado com texto normal para criar instruções completas