# Badge

Selo de estado, sempre em pilula, sempre curto.

`tone`: `neutral`, `accent`, `success`, `warning`, `danger`, `info`. Use o tom
pelo significado, nunca pela cor que você quer.

E a única peça em pilula por padrão: selo em canto reto parece etiqueta de
sistema antigo, e botão em pilula dentro de formulário parece brinquedo.

## No React Native

Traduz nos tons e na pílula, e **sem o `size` do web**. Lá o `sm` existe para o selo caber numa linha de `DataTable`, que é de mesa e encolhe com a densidade; aqui não há linha que encolha: o `RivoProvider` nativo já declara que `comfortable` é a única altura, porque alvo de toque não diminui, e um segundo tamanho seria a única peça do pacote oferecendo o compacto que o pacote decidiu não ter.

E a prop custaria mais do que paga. Para casar com o web ela precisaria nascer em `md`, o que aumentaria todo selo já publicado; nascer no tamanho de hoje faria `size="md"` desenhar coisas diferentes nos dois pacotes, que é pior do que não ter a prop. O selo nativo é `text-xs`, fixo.

## Importação

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

## Exemplos

### Tons

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

export function Tones() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>Rascunho</Badge>
      <Badge tone="accent">Novo</Badge>
      <Badge tone="success">Pago</Badge>
      <Badge tone="warning">Vence em 3 dias</Badge>
      <Badge tone="danger">Vencido</Badge>
      <Badge tone="info">Em analise</Badge>
    </div>
  )
}
```

### Tamanhos

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

export function Sizes() {
  return (
    <div className="flex items-center gap-2">
      <Badge size="sm" tone="success">Pequeno</Badge>
      <Badge size="md" tone="success">Médio</Badge>
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `size` | `"md" \| "sm" \| null` |  | 0.4.0 |  |
| `tone` | `"accent" \| "danger" \| "info" \| "neutral" \| "success" \| "warning" \| 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)
- [EmptyState](/componentes/empty-state.md)
- [Indicator](/componentes/indicator.md)
- [Kbd](/componentes/kbd.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)