Etiqueta

El estado de un registro: aprobado, en revisión, vencido, borrador. Nació para la columna "estado" de la tabla, que es donde siempre aparece, pero no depende de ella: sirve en una tarjeta, en una lista y junto a un título. Solo clases.

Ejemplos

El tono lleva el significado; el peso queda en el texto de la fila.

Cómo usar

<span class="tuc-badge is-success">Aprobado</span>
<span class="tuc-badge is-warning">En revisión</span>
<span class="tuc-badge is-danger">Vencido</span>
<span class="tuc-badge is-info">Nuevo</span>
<span class="tuc-badge">Borrador</span>
<span class="tuc-badge is-plain">12 adjuntos</span>

En Django

El tono es una decisión del modelo, no de la plantilla: así es el mismo en el listado, en el detalle y en el correo.

class Contract(models.Model):
    status = models.CharField(max_length=20, choices=Status.choices)

    @property
    def status_tone(self):
        return {"paid": "success", "review": "warning", "overdue": "danger"}.get(self.status, "")

<span class="tuc-badge {% if contract.status_tone %}is-{{ contract.status_tone }}{% endif %}">
  {{ contract.get_status_display }}
</span>

Por qué no rellena

Fondo suave con texto fuerte. En una lista de veinte filas, veinte etiquetas sólidas compiten con el contenido y la tabla se convierte en un semáforo.

El punto repite el estado sin depender solo del color de fondo — ayuda a quien no distingue los colores, sumado al texto, y se ve mejor en pantallas pequeñas. Es un pseudoelemento, así que el lector de pantalla lee solo el texto, y es el texto el que tiene que decir el estado: "Vencido", y no una etiqueta roja vacía.

Clases