Badge

The status of a record: approved, under review, overdue, draft. It was born for the "status" column of a table, which is where it always shows up, but it doesn't depend on it: it works in a card, in a list and next to a heading. Classes only.

Examples

The tone carries the meaning; the weight stays with the text of the row.

How to use

<span class="tuc-badge is-success">Approved</span>
<span class="tuc-badge is-warning">Under review</span>
<span class="tuc-badge is-danger">Overdue</span>
<span class="tuc-badge is-info">New</span>
<span class="tuc-badge">Draft</span>
<span class="tuc-badge is-plain">12 attachments</span>

In Django

The tone is a decision of the model, not of the template: that way it is the same in the list, in the detail page and in the email.

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>

Why not filled

Soft background with strong text. In a list of twenty rows, twenty solid badges compete with the content and the table turns into a traffic light.

The dot repeats the status without relying on background color alone — together with the text, it helps people who can't tell the colors apart, and it reads better on a small screen. It is a pseudo-element, so the screen reader reads only the text, and it is the text that has to state the status: "Overdue", not an empty red badge.

Classes