Visão geral

O Kbd renderiza como elemento kbd semântico com estilo de tecla física. Ideal para documentação e atalhos de teclado.

Teclas individuais

⌘CtrlAltShiftTabEscEnterSpace↑↓←→

Atalhos compostos

⌘+K

Ctrl+S

Ctrl+Shift+P

Import

import { Kbd } from "@/components/kbd"

Tamanhos

O Kbd tem dois tamanhos: default e sm.

⌘K

default

⌘K

Tabela de atalhos

Padrão para documentar atalhos de teclado no design system.

Abrir paleta de comandos

⌘+K

Salvar

⌘+S

Desfazer

⌘+Z

Paleta de comandos (Windows)

Ctrl+Shift+P

Fechar modal / Cancelar

Esc

Avançar foco

Tab

Navegar na lista

↑+↓

Confirmar seleção

Enter

Padrão de implementação

Snippets para os usos mais comuns do Kbd.

Tecla única

import { Kbd } from "@/components/kbd"

<Kbd>⌘</Kbd>
<Kbd>Esc</Kbd>
<Kbd>Enter</Kbd>

Atalho composto

<div className="flex items-center gap-1">
  <Kbd>⌘</Kbd>
  <span className="text-muted-foreground">+</span>
  <Kbd>K</Kbd>
</div>

Inline em texto

<p className="text-sm">
  Use <Kbd>Tab</Kbd> para avançar e{" "}
  <Kbd>Shift</Kbd> + <Kbd>Tab</Kbd> para voltar.
</p>

Props e uso

API do componente Kbd.

Props

size

"default" | "sm"

Tamanho do elemento. Default: 24px, sm: 20px de altura.

children

ReactNode

Conteúdo da tecla (texto ou símbolo).

className

string

Classes adicionais.

Semântica

O Kbd renderiza como <kbd>, que é o elemento HTML semântico correto para representar input de teclado.

Leitores de tela anunciam o conteúdo normalmente. Se precisar de um anúncio especial, use aria-label.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter