Insignia (badge)
Una etiqueta compacta para un estado o un recuento. Las insignias no son interactivas; si la etiqueta importa para la tecnología asistiva, mantenla como texto real y no como color a secas.
<div class="iv-stack iv-u-gap-4">
<div class="iv-cluster iv-u-gap-2">
<span class="iv-badge">Draft</span>
<span class="iv-badge iv-badge--primary">Primary</span>
<span class="iv-badge iv-badge--success">Published</span>
<span class="iv-badge iv-badge--warning">Needs review</span>
<span class="iv-badge iv-badge--danger">Failed</span>
<span class="iv-badge iv-badge--info">Beta</span>
</div>
<div class="iv-cluster iv-u-gap-2">
<span class="iv-badge iv-badge--solid">Draft</span>
<span class="iv-badge iv-badge--solid iv-badge--primary">Primary</span>
<span class="iv-badge iv-badge--solid iv-badge--success">Published</span>
<span class="iv-badge iv-badge--solid iv-badge--warning">Needs review</span>
<span class="iv-badge iv-badge--solid iv-badge--danger">Failed</span>
<span class="iv-badge iv-badge--solid iv-badge--info">Beta</span>
</div>
<p class="iv-u-m-0 iv-u-text-sm">
A badge is a label, not a control. When the colour carries the only
meaning, the text repeats it: <span class="iv-badge iv-badge--danger">Build failed</span>
</p>
</div>Clases
iv-badge más --primary --success --warning --danger --info (fondo suave, texto de color) y --solid (relleno). Sin variante, la insignia es neutra.
Errores frecuentes
- Usar una insignia como botón; usa
iv-button--smen su lugar. - Transmitir el estado solo con color: incluye una palabra, por ejemplo «Pagado».
Índice de clases
Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.
| Clase | Qué hace |
|---|---|
iv-badge--primary | Tono primario. |
iv-badge--info | Tono informativo. |
iv-badge--success | Tono de éxito. |
iv-badge--warning | Tono de aviso. |
iv-badge--danger | Tono de peligro. |
iv-badge--solid | Variante sólida: el tono pasa al fondo en lugar del tinte. |