Badge
Insignia
Una insignia es una marca pequeña, no clicable, adjunta a otro elemento. Muestra un conteo, estado o señal corta y es un patrón de diseño, no un estándar web.
Un ejemplo real
Una bandeja de entrada tiene tres mensajes no leídos de alta prioridad. El texto de la bandeja de entrada y el nombre accesible indican ambos la cantidad sin hacer que la insignia sea un punto de parada separado del teclado. Una pastilla de filtro clicable es un chip, no una insignia.
Partes principales
- 01elemento del anfitrión
- 02valor compacto
- 03equivalente accesible
Úsalo cuando
Usa este término para un pequeño estado adicional o conteo adjunto a una etiqueta o ícono principal.
No lo uses cuando
No pongas texto largo esencial, una acción o un significado que solo se muestra por color dentro de una insignia.
Nombre usado en código
label + noninteractive status indicator Antes de lanzarlo
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Insignia (Badge). User context: Una bandeja de entrada tiene tres mensajes no leídos de alta prioridad. El texto de la bandeja de entrada y el nombre accesible indican ambos la cantidad sin hacer que la insignia sea un punto de parada separado del teclado. Una pastilla de filtro clicable es un chip, no una insignia. Recommended pattern: Insignia (Badge). Why it fits: Usa este término para un pequeño estado adicional o conteo adjunto a una etiqueta o ícono principal. Do not use it when: No pongas texto largo esencial, una acción o un significado que solo se muestra por color dentro de una insignia. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Es oficial para esa fuente. Otras plataformas o equipos pueden usar el término de otra manera. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Insignia (Badge) is used now. Definition: Una insignia es una marca pequeña, no clicable, adjunta a otro elemento. Muestra un conteo, estado o señal corta y es un patrón de diseño, no un estándar web. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.