Kbd

mk-kbd exibe uma tecla de teclado com estilo visual consistente — padding, borda, raio e tipografia sans-serif. Renderiza a tag HTML nativa <kbd> internamente, preservando semântica documental. É puramente visual: não é focável, não emite eventos e não possui estados interativos. Para compor atalhos com separadores "+" automáticos, use mk-kbd-combo.

Padrão

import { MkKbd } from '@db1/makuco-ui-react';

<MkKbd>Ctrl</MkKbd>

<mk-kbd>Ctrl</mk-kbd>

Tamanhos

Quatro tamanhos via size: sm, md (padrão) e lg. O tamanho controla altura, padding, tipografia e raio da borda.

<MkKbd size="xs">Esc</MkKbd>
<MkKbd size="sm">Tab</MkKbd>
<MkKbd size="md">Enter</MkKbd>
<MkKbd size="lg">Space</MkKbd>

<mk-kbd size="xs">Esc</mk-kbd>
<mk-kbd size="sm">Tab</mk-kbd>
<mk-kbd size="md">Enter</mk-kbd>
<mk-kbd size="lg">Space</mk-kbd>

Rótulo descritivo

A prop label faz duas coisas: exibe um texto descritivo visível à direita da tecla e aplica aria-label no host. Use-a quando o slot contém um símbolo cujo significado não é óbvio isolado (ex.: ⌘, ⏎, ⌫).

<MkKbd label="Fechar janela">Esc</MkKbd>

<mk-kbd label="Fechar janela">Esc</mk-kbd>

Ícone no slot

O slot default aceita qualquer conteúdo, incluindo mk-icon. Combine com label quando o ícone não tiver rótulo acessível próprio.

import { MkIcon, MkKbd } from '@db1/makuco-ui-react';

<MkKbd label="Seta para cima">
  <MkIcon name="arrow-up" />
</MkKbd>

<mk-kbd label="Seta para cima">
  <mk-icon name="arrow-up"></mk-icon>
</mk-kbd>

mk-kbd-combo

mk-kbd-combo recebe keys: string[] e renderiza cada item como um mk-kbd, inserindo separadores "+" automaticamente. Quando keys está vazio, o componente não renderiza nada.

import { MkKbdCombo } from '@db1/makuco-ui-react';

<MkKbdCombo keys={['Ctrl', 'K', 'P']} />

<!-- defina a prop no componente TypeScript -->
<!-- keys = ['Ctrl', 'K', 'P'] -->
<mk-kbd-combo [keys]="keys"></mk-kbd-combo>

mk-kbd-combo com rótulo

A prop label exibe um texto descritivo visível à direita das teclas.

<MkKbdCombo keys={['Ctrl', 'K']} label="Abrir paleta de comandos" />

<mk-kbd-combo [keys]="keys" label="Abrir paleta de comandos"></mk-kbd-combo>

Tamanhos do combo

A prop size propaga para todos os mk-kbd internos e define a tipografia do separador e do label. O padrão é sm.

<MkKbdCombo keys={['Ctrl', 'K']} size="sm" label="Small" />
<MkKbdCombo keys={['Ctrl', 'K']} size="md" label="Medium" />
<MkKbdCombo keys={['Ctrl', 'K']} size="lg" label="Large" />

<mk-kbd-combo [keys]="keys" size="sm" label="Small"></mk-kbd-combo>
<mk-kbd-combo [keys]="keys" size="md" label="Medium"></mk-kbd-combo>
<mk-kbd-combo [keys]="keys" size="lg" label="Large"></mk-kbd-combo>

Props — mk-kbd

Props — mk-kbd-combo

Slots

Acessibilidade

• mk-kbd usa a tag <kbd> nativa internamente — preserva semântica documental sem role ARIA adicional.
• Nenhum dos componentes é focável (tabindex ausente). Use mk-button para controles interativos com atalho visível.
• mk-kbd: quando label é fornecido, é aplicado como aria-label no host e o texto é também renderizado visivelmente à direita da tecla.
• mk-kbd-combo: separadores "+" recebem aria-hidden="true" e não são anunciados por leitores de tela.
• Ao usar mk-kbd dentro de um elemento que já descreve o atalho (ex.: aria-label="Salvar (Ctrl+S)" em mk-button), aplique aria-hidden="true" em um wrapper para evitar leitura duplicada.
• Seleção de texto é permitida — é comum copiar atalhos de documentação.