Badges y alertas.

Cuándo usar

Badge etiqueta un estado corto; alert comunica información relevante dentro del flujo de lectura.

• Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
• Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
• Documentar cualquier excepción en el producto consumidor.

Ejemplo visible

Anatomía

Estados y variantes

Accesibilidad

• Estado expresado en texto.
• role=alert sólo para mensajes urgentes nuevos.
• El cierre tiene nombre accesible.
• No usar badge como único label de un control.

HTML de referencia

<div class="cis-alert cis-alert--warning">
  <h2>Revisa la fecha</h2>
  <p>El conjunto se actualizó por última vez el 24 de agosto.</p>
</div>

Definition of Done

• Ejemplo visible y código copiable coinciden.
• Teclado, foco, nombre accesible y estado fueron probados.
• El componente funciona sin JavaScript o declara una mejora progresiva acotada.
• Los mensajes cumplen core/prosa en modo estricto.
• La promoción registra versión, compatibilidad y prueba de regresión.