Saltar al contenido
EspañolEnglish
Todos los componentes (204)

Insignia

Estado · Badge

Qué es y cuándo usarlo

Insignia sobre otra cosa: el contador de una campana, el punto verde de «en línea», el número del carrito.

Cuándo usarlo

  • Cuando el dato va ENCIMA de otro elemento, en una esquina.
  • dot para «hay algo nuevo» sin decir cuánto.
  • count para la cifra: con 0 no se pinta nada, salvo con showZero, y pasado max (99 por defecto) sale «99+». tone (error por defecto) y placement eligen color y esquina.

Cuándo no

  • Para una etiqueta que va SOLA en la línea del texto (un estado, una categoría), Tag.
  • Para un número que es el contenido y no un adorno de otro, Stat.

Teclado: no participa. Lo enfocable es lo que lleva debajo.

Accesibilidad: lo que se lee es label, la frase entera («3 mensajes sin leer»), no la cifra: el globo va marcado como decorativo. Un «3» suelto no dice nada, y además el globo puede haberse recortado a «99+». Ojo con el envoltorio: el globo sale de la caja, así que un ancestro con overflow: hidden lo corta — es lo primero que mirar si no se ve.

Aspecto fino: --amset-badge-background, --amset-badge-color y --amset-badge-ring.

Cómo se ve

3 mensajes sin leer134 pedidos pendientesEn línea

<Badge count={3} label="3 mensajes sin leer" tone="error">
  <IconButton aria-label="Mensajes"><BellIcon /></IconButton>
</Badge>
<Badge count={134} max={99} label="134 pedidos pendientes" tone="warning">
  <Button variant="outline">Pedidos</Button>
</Badge>
<Badge dot label="En linea" tone="success" placement="bottom-end">
  <Avatar name="Ada Lovelace" />
</Badge>

Props

Se importa con import { Badge } from '@amset/ui'. Las obligatorias van marcadas.

PropTipoPara qué sirve
childrenobligatoriaReactNodeLo que lleva la insignia encima: un icono, un avatar, un boton.
labelobligatoriastringLa frase entera que se lee: «3 mensajes sin leer». Obligatoria, porque un «3» suelto no dice nada, y el numero va marcado como decorativo para que no se lea dos veces.
classNamestringSe une a las clases de la biblioteca, no las sustituye.
countnumberEl numero. Con `0` no se pinta nada, salvo que se pida `showZero`.
dotbooleanSolo un punto, sin cifra. Para «hay algo nuevo» sin decir cuanto.
maxnumberA partir de cuanto pone «+». Por defecto, 99.
placement"bottom-end" | "bottom-start" | "top-end" | "top-start"—
showZeroboolean—
tone"neutral" | "accent" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error"—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: