Etiqueta

O estado de um registro: aprovado, em análise, vencido, rascunho. Nasceu para a coluna "situação" da tabela, que é onde ela sempre aparece, mas não depende dela: vale em card, em lista e ao lado de um título. Só classe.

Exemplos

O tom carrega o significado; o peso fica com o texto da linha.

Como usar

<span class="tuc-badge is-success">Aprovado</span>
<span class="tuc-badge is-warning">Em análise</span>
<span class="tuc-badge is-danger">Vencido</span>
<span class="tuc-badge is-info">Novo</span>
<span class="tuc-badge">Rascunho</span>
<span class="tuc-badge is-plain">12 anexos</span>

No Django

O tom é decisão do modelo, e não do template: assim ele é o mesmo na listagem, no detalhe e no e-mail.

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 que não preenchida

Fundo suave com texto forte. Numa lista de vinte linhas, vinte etiquetas sólidas competem com o conteúdo e a tabela vira um semáforo.

O ponto repete o estado sem depender só da cor de fundo — ajuda quem não distingue as cores, somado ao texto, e desenha melhor em tela pequena. Ele é um pseudo-elemento, então o leitor de tela lê só o texto, e é o texto que precisa dizer o estado: "Vencido", e não uma etiqueta vermelha vazia.

Classes