Insignia

Una insignia envuelve algo y le prende un marcador en la esquina superior: mensajes sin leer en un botón de bandeja de entrada, un punto de «en línea» en un avatar. Recibe como hijos aquello que marca.

Insignia básica

4AL12

stack({ direction: 'row', gap: 'xl', align: 'center' },
  badge({ content: 4 }, button({ variant: 'soft', color: 'neutral' }, 'Bandeja de entrada')),
  badge({ content: 12 }, avatar({ name: 'Ada Lovelace' })),
)

Colores

33333

stack({ direction: 'row', gap: 'xl', align: 'center', wrap: true },
  badge({ content: 3, color: 'primary' }, button({ variant: 'soft', color: 'neutral' }, 'Primary')),
  badge({ content: 3, color: 'neutral' }, button({ variant: 'soft', color: 'neutral' }, 'Neutral')),
  badge({ content: 3, color: 'success' }, button({ variant: 'soft', color: 'neutral' }, 'Success')),
  badge({ content: 3, color: 'warning' }, button({ variant: 'soft', color: 'neutral' }, 'Warning')),
  badge({ content: 3, color: 'danger' }, button({ variant: 'soft', color: 'neutral' }, 'Danger')),
)

Máximo

Un recuento por encima de max se dibuja como n+, así una insignia nunca crece tanto como para desequilibrar aquello sobre lo que se apoya.

999+250

stack({ direction: 'row', gap: 'xl', align: 'center', wrap: true },
  badge({ content: 9 }, button({ variant: 'soft', color: 'neutral' }, 'Nueve')),
  badge({ content: 250 }, button({ variant: 'soft', color: 'neutral' }, 'Tope en 99')),
  badge({ content: 250, max: 999 }, button({ variant: 'soft', color: 'neutral' }, 'max: 999')),
)

Punto

Un punto dice «algo ha cambiado» sin decir cuánto. Dale un label: un punto pelado no significa nada para un lector de pantalla, así que sin él queda oculto por completo del árbol de accesibilidad.

stack({ direction: 'row', gap: 'xl', align: 'center' },
  badge({ dot: true, color: 'success', label: 'En línea' }, avatar({ name: 'Ada Lovelace' })),
  badge({ dot: true, color: 'warning', label: 'Requiere atención' },
    iconButton({
      label: 'Ajustes',
      variant: 'soft',
      color: 'neutral',
      icon: icon('settings'),
    }),
  ),
)

Etiquetar el recuento

Un número a secas es ambiguo fuera de contexto. label pasa a ser el nombre accesible de la insignia, así que se lee como «4 mensajes sin leer» y no como «4».

badge({ content: 4, label: '4 mensajes sin leer' },
  button({ variant: 'soft', color: 'neutral' }, 'Bandeja de entrada'),
)

Cambiar el recuento

Un recuento es el número de una página con más probabilidad de cambiar mientras está abierta. setBadge() lo recorta a max igual que hizo el servidor, mantiene con él el texto anunciado, y saca del árbol de accesibilidad una insignia vaciada — que es como desaparece una insignia.

El texto anunciado es la prosa del sitio, así que pásalo siempre que la insignia tenga uno:

button({ onclick: "import('/su/badge.js').then(m=>m.set('inbox',0))" }, 'Mark all read')

O desde tu propio módulo, cuando ya haya uno en marcha:

import { setBadge } from 'sitelo/ui/client'

setBadge('inbox', 7, { label: '7 unread messages' })

Props

Prop	Tipo	Por defecto	Descripción
`content`	`string \| number`	—	Lo que muestra la insignia. Se ignora si dot está puesto.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'danger'`	Color de la insignia.
`dot`	`boolean`	`false`	Un punto pequeño en lugar de un valor.
`max`	`number`	`99`	Los recuentos por encima de esto se dibujan como n+.
`label`	`string`	—	Nombre accesible de la propia insignia.