# Kbd

A tecla de um atalho, desenhada como tecla.

```tsx
<Kbd keys="mod+k" />
<Kbd>Esc</Kbd>
```

`mod` é a razão de a peça existir. Ele sai como `⌘` no Mac e `Ctrl` no resto,
lendo a plataforma uma vez. A alternativa é cada tela decidir sozinha, e metade
delas escreve Ctrl para todo mundo: quem usa Mac vê o símbolo errado e conclui
que o atalho não existe.

Também conhece `shift`, `alt`, `enter`, `esc`, `tab` e as setas, e devolve o
símbolo curto onde a plataforma usa símbolo.

## Acessibilidade

Um atalho vira uma tecla por parte, com as teclas escondidas do leitor de tela e
a combinação inteira no rótulo do grupo. Sem isso o leitor soletra "comando" e
"K" como dois textos soltos, e quem ouve não monta a combinação.

## Quando não usar

Para nome de arquivo, comando de terminal ou trecho de código, use `code`. A
sombra de tecla promete "aperte isto", e prometer errado custa mais do que não
prometer nada.

## No React Native

Não porta. A peça desenha uma tecla, e o celular não tem teclado físico para a tecla representar: `⌘K` numa tela de toque promete um gesto que não existe. O que no web é atalho, no celular é um botão visível.

## Importação

```tsx
import { Kbd } from '@rivocode/ui'
```

## Exemplos

### Atalhos

```tsx
import { Kbd } from '@rivocode/ui'

export function Shortcuts() {
  return (
    <div className="flex flex-col gap-3 text-base text-fg-muted">
      <p className="flex items-center gap-2">
        Abrir a paleta <Kbd keys="mod+k" />
      </p>
      <p className="flex items-center gap-2">
        Fechar a barra lateral <Kbd keys="mod+b" />
      </p>
      <p className="flex items-center gap-2">
        Sair sem salvar <Kbd>Esc</Kbd>
      </p>
    </div>
  )
}
```

### Dentro de uma frase

```tsx
import { Kbd } from '@rivocode/ui'

export function InProse() {
  return (
    <p className="max-w-md text-base leading-relaxed text-fg-muted">
      Segure <Kbd size="sm" keys="shift" /> e clique para marcar várias linhas de uma vez. Com{' '}
      <Kbd size="sm" keys="mod" /> a marcação vai somando, uma a uma.
    </p>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `keys` | `string` |  | 0.4.0 | O atalho, como `"mod+k"`. |
| `size` | `"md" \| "sm" \| null` |  | 0.4.0 |  |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Alert](/componentes/alert.md)
- [Badge](/componentes/badge.md)
- [EmptyState](/componentes/empty-state.md)
- [Indicator](/componentes/indicator.md)
- [Meter](/componentes/meter.md)
- [Progress](/componentes/progress.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)