# CountBadge

> El contador de un botón de ícono de barra —la campana con los no leídos—: un `Badge variant="count"` arriba a la derecha del ícono, con «99+».

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

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### En una barra

El contador va adentro del botón, arriba a la derecha del ícono. El número lo dice el nombre del botón: «Avisos, 3 sin leer». Con 0 no se dibuja; pasado 99 dice «99+».

```tsx
import { BellIcon, InboxIcon } from "lucide-react"
import { Button } from "sebs7n-ui/button"
import { CountBadge, countLabel } from "sebs7n-ui/count-badge"
import { Toolbar, ToolbarButton } from "sebs7n-ui/toolbar"
import { useState } from "react"

function InToolbar() {
  const [unread, setUnread] = useState(3)
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Toolbar aria-label="Facturación">
        <span className="flex-1 px-2 text-headline text-label">Facturas</span>
        <ToolbarButton render={<Button aria-label={countLabel("Pendientes de cobro", 128, "facturas")} size="icon-sm" variant="plain" />}>
          <InboxIcon />
          <CountBadge count={128} />
        </ToolbarButton>
        <ToolbarButton render={<Button aria-label={countLabel("Avisos", unread, "sin leer")} size="icon-sm" variant="plain" />}>
          <BellIcon />
          <CountBadge count={unread} />
        </ToolbarButton>
      </Toolbar>
      <div className="flex gap-2">
        <Button onClick={() => setUnread(unread + 1)} size="sm" variant="secondary">
          Llega un aviso
        </Button>
        <Button onClick={() => setUnread(0)} size="sm" variant="secondary">
          Marcar todos como leídos
        </Button>
      </div>
    </div>
  )
}
```

## Props

### CountBadge

Hereda las props de `<span>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `count` * | `number` | — | La cantidad. Con 0 (o menos, o `NaN`) no se dibuja nada. |
| `color` | `"brand" \| "gray" \| "red" \| "amber" \| "green" \| "blue" \| "teal" \| "purple" \| "pink"` | `"red"` | Rojo por defecto, como el de las notificaciones. |
| `max` | `number` | `99` | Desde cuánto se escribe «99+». El nombre del botón dice el número real (`countLabel`). |
| `className` | `string` | — | Clases del contador (el anillo de otra superficie: `ring-surface-header`). |

`*` obligatoria.

## Teclado

| Tecla | Qué hace |
|---|---|
| — | No es interactivo: el botón que lo lleva es el que recibe el foco. |

## Accesibilidad

- Es decorativo (`aria-hidden`): el número va en el nombre del botón, con `countLabel("Notificaciones", 3, "sin leer")` → «Notificaciones, 3 sin leer». Con 0 el nombre es solo «Notificaciones».
- El nombre dice el número real aunque el contador diga «99+».
- **Un cambio del número no se anuncia**: el nombre del botón se lee recién al enfocarlo. Si importa enterarse en el momento (llegó una notificación), la app lo avisa en una región viva, fuera del botón: `<span role="status" className="sr-only">{aviso}</span>`, montado desde el principio, con `aviso` = «2 notificaciones nuevas» cuando llegan. Solo lo nuevo, no cada cambio del total.
- Rojo por defecto (`red-800` con blanco, 4,5:1). El color no es el único dato: el número se lee.

## Reglas de uso

- Va **adentro** del `Button` de ícono (que ya es `relative`), después del ícono; también dentro de un `ToolbarButton` o del trigger de un menú.
- Con 0 (o menos) no se dibuja. `max` cambia el tope (99 por defecto: «99+»).
- El anillo del color de la barra (`surface-bar`) lo separa del ícono; sobre otra superficie, `className="ring-surface-header"`.
- Sin estado: sirve en un Server Component. Solo por subpath (`sebs7n-ui/count-badge`).

## Relacionados

[badge](/docs/components/badge.md) · [toolbar](/docs/components/toolbar.md) · [button](/docs/components/button.md)