# Badge

> Etiqueta de estado: nueve colores en tono suave, dos en sólido, con punto opcional.

```tsx
import { Badge } from "sebs7n-ui/badge"
```

## Ejemplos

### Colores

```tsx
import { Badge } from "sebs7n-ui/badge"

function Colores() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>Borrador</Badge>
      <Badge color="brand">Nuevo</Badge>
      <Badge color="green">Pagado</Badge>
      <Badge color="amber">Pendiente</Badge>
      <Badge color="red">Vencido</Badge>
      <Badge color="blue">En revisión</Badge>
      <Badge color="teal">Enviado</Badge>
      <Badge color="purple">Archivado</Badge>
      <Badge color="pink">Prueba</Badge>
    </div>
  )
}
```

### Sólido y con punto

`solid` solo existe en `gray` y `brand`: el resto no llega a 4,5:1.

```tsx
import { Badge } from "sebs7n-ui/badge"

function SolidoYPunto() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="solid">Admin</Badge>
      <Badge variant="solid" color="brand">
        Pro
      </Badge>
      <Badge dot color="green">
        Activo
      </Badge>
      <Badge dot color="red" size="sm">
        Caído
      </Badge>
    </div>
  )
}
```

### En una tabla

`size="sm"` dentro de una fila, para que no infle el alto.

```tsx
import { Badge } from "sebs7n-ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "sebs7n-ui/table"

function EnTabla() {
  return (
    <Table density="compact">
      <TableHeader>
        <TableRow>
          <TableHead>Factura</TableHead>
          <TableHead>Estado</TableHead>
          <TableHead numeric>Importe</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>0012</TableCell>
          <TableCell>
            <Badge size="sm" color="green">
              Pagada
            </Badge>
          </TableCell>
          <TableCell numeric>$ 128.400</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>0013</TableCell>
          <TableCell>
            <Badge size="sm" color="amber">
              Pendiente
            </Badge>
          </TableCell>
          <TableCell numeric>$ 96.000</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}
```

## Props

### Badge

Hereda las props de `<span>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `color` | `"brand" \| "gray" \| "red" \| "amber" \| "green" \| "blue" \| "teal" \| "purple" \| "pink"` | `"gray"` | Nueve tonos. Con `variant="solid"` el tipo solo deja `gray` y `brand`. |
| `dot` | `boolean` | `false` | Agrega un punto del color del badge a la izquierda del texto. |
| `render` | `React.ReactElement \| ComponentRenderFn<RenderFunctionProps, State>` | — | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| `size` | `"sm" \| "md"` | `"md"` | — |
| `variant` | `"subtle" \| "solid"` | `"subtle"` | — |
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| — | No es interactivo. Si tiene que serlo, `render={<button />}` y pasa a comportarse como un botón. |

## Accesibilidad

- Es un `<span>`: no anuncia nada por sí solo. El color no puede ser la única señal — el texto tiene que decir el estado.
- `solid` existe solo en `gray` y `brand` porque los 700 de Geist con texto blanco no llegan a 4,5:1 en el resto de los tonos.
- El punto (`dot`) es `aria-hidden`: es decoración.

## Reglas de uso

- **Estado, no acción.** Si se puede hacer click, es un `Button` o un `Toggle`.
- `subtle` es el default y el que va en una tabla o en una lista. `solid` solo para destacar uno entre muchos.
- El color tiene que significar algo consistente en toda la app: `green` pagado, `amber` pendiente, `red` vencido. No lo elijas por estética.
- `size="sm"` dentro de una fila de tabla; `md` suelto.

## Relacionados

[button](/docs/components/button.md) · [table](/docs/components/table.md) · [alert](/docs/components/alert.md)