# Contador

> Un contador redondo que muestra 99+ por encima del máximo. Un componente nativo de Pyzed para GUIs de escritorio en Python, con vista previa, ejemplos y su API.

Source: https://albakore.github.io/pyzed/es/library/count-badge/

:::tip[En pocas palabras]
Un numerito redondo, como el número de mensajes sin leer en el icono de una app.
:::

Un contador redondo para notificaciones o problemas. Por encima de `max` muestra `99+`.

`ui.count_badge` · Categoría: [Estado y avisos](https://albakore.github.io/pyzed/es/library/#estado-y-avisos) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#count_badge)

**Código:**

```python
pz.row([
    ui.count_badge(3),
    ui.count_badge(42, tint="success"),
    ui.count_badge(120, tint="error"),
    pz.row([ui.icon_button("bell", on_press), ui.count_badge(7)], spacing=2, align="center"),
], spacing=16, align="center")
```

## Cuándo usarlo

- Junto a un icono o pestaña para indicar cuántos elementos sin leer o errores hay.
- Para estados de texto usa una [Insignia](https://albakore.github.io/pyzed/es/library/badge/).

## Uso

```python
import pyzed as pz
from pyzed import ui

pz.row([
    ui.count_badge(3),
    ui.count_badge(42, tint="success"),
    ui.count_badge(120, tint="error"),
    pz.row([ui.icon_button("bell", on_press), ui.count_badge(7)], spacing=2, align="center"),
], spacing=16, align="center")
```

## Variantes

:::note[Sobre estas capturas]
Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre **Código** bajo una captura para ver el fragmento que la dibuja; los nombres libres como `on_save` son tus propios callbacks.
:::

### Cuenta

Por encima de `max` muestra `max+`.

```python
ui.count_badge(3)
```

```python
ui.count_badge(42)
```

```python
ui.count_badge(120)
```

```python
ui.count_badge(12, max=9)
```

### Tinte

```python
ui.count_badge(5, tint="success")
```

```python
ui.count_badge(5, tint="warning")
```

```python
ui.count_badge(5, tint="error")
```

### Junto a un icono

```python
pz.row([ui.icon_button("bell", on_press), ui.count_badge(7)], spacing=2, align="center")
```

### Estados y eventos

Con `show_zero=False` no dibuja nada en 0 pero mantiene su lugar en el diseño.

```python
pz.row([ui.icon_button("bell", on_press), ui.count_badge(0, show_zero=False)], align="center")
```

## Eventos

Contador no tiene eventos propios: muestra lo que le das. Como todo widget, también tiene los **18 eventos comunes** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), que se conectan con `.on(...)`: mira [Eventos](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

## Propiedades y API

### `ui.count_badge`

```python
count_badge(count, *, tint='accent', max=99, show_zero=True, theme=None)
```

Un contador redondo (notificaciones, problemas…). Muestra `99+` por encima de `max`.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `count` | *obligatorio* | El número. |
| `tint` | `"accent"` | Color semántico: `"accent"`, `"error"`, `"warning"`, `"success"`, `"info"` o un token. |
| `max` | `99` | Máximo antes de mostrar `N+`. |
| `show_zero` | `True` | Con `False`, un 0 no dibuja nada. |
| `theme` | `None` | Tema a usar en lugar del actual (`pyzed.theme.current()`). |

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#count_badge)

## Relacionados

- [Insignia](https://albakore.github.io/pyzed/es/library/badge/): Una pastilla pequeña para estados, versiones y contadores.
- [Indicador](https://albakore.github.io/pyzed/es/library/indicator/): Un punto de color para estado, presencia o cambios sin guardar.
- [Barra de estado](https://albakore.github.io/pyzed/es/library/status-bar/): La barra inferior: diagnósticos, posición del cursor, lenguaje.