Aviso

O que continua valendo enquanto a pessoa está na tela: "sua assinatura vence em 3 dias", "este contrato está bloqueado para edição". O toast é para o que acabou de acontecer e some sozinho; aviso que some antes de ser lido não avisou. Só classe, sem JavaScript.

Os valores desta tela são atualizados a cada 5 minutos.

Contrato assinado

As duas partes assinaram em 12/09/2026.

Assinatura vence em 3 dias

Renove para não perder o acesso aos relatórios.

Contrato bloqueado para edição

Há uma cobrança em disputa. Fale com o financeiro.

Exemplos

As peças são opcionais: título, ícone e ações entram só quando fazem falta.

Sem tom

Sem is-* o aviso é neutro, para o que não é bom nem ruim.

Rascunho salvo às 14:32.

Sem ícone

O ícone é o primeiro filho, quando existe; sem ele o texto encosta na borda.

Manutenção programada

Sábado, das 22h às 23h.

Com duas ações

As ações são os botões do sistema. Em tela estreita, descem para baixo do texto.

Há alterações não publicadas.

Aparece depois

A resposta de um envio leva role="alert" e é anunciada na hora.

Como usar

Um .tuc-alert com o tom, o ícone como primeiro filho e o texto em .tuc-alert__body.

<div class="tuc-alert is-warning">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z"/></svg>
  <div class="tuc-alert__body">
    <p class="tuc-alert__title">Assinatura vence em 3 dias</p>
    <p>Renove para não perder o acesso.</p>
  </div>
  <div class="tuc-alert__actions">
    <a class="tuc-btn is-outline is-sm" href="/subscription/">Renovar</a>
  </div>
</div>

O ícone não vem da biblioteca: é o SVG que você cola, e ele herda a cor do tom. Os desta página, para copiar:

<!-- informação -->
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16v-4M12 8h.01M12 22a10 10 0 100-20 10 10 0 000 20z"/></svg>
<!-- sucesso -->
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.1V12a10 10 0 11-5.9-9.1M22 4L12 14l-3-3"/></svg>
<!-- alerta -->
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z"/></svg>
<!-- perigo -->
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22a10 10 0 100-20 10 10 0 000 20zM15 9l-6 6M9 9l6 6"/></svg>

No template do Django

O erro que não pertence a um campo, non_field_errors, é o caso mais comum. E as mensagens do Django podem virar aviso, em vez de toast, quando precisam ficar na tela. O tom de erro do Django chama error; o do aviso, is-danger.

{% if form.non_field_errors %}
  <div class="tuc-alert is-danger">
    <div class="tuc-alert__body">
      <p class="tuc-alert__title">Não foi possível salvar</p>
      {% for error in form.non_field_errors %}<p>{{ error }}</p>{% endfor %}
    </div>
  </div>
{% endif %}

{% for m in messages %}
  <div class="tuc-alert {% if m.level_tag == 'error' %}is-danger{% else %}is-{{ m.level_tag }}{% endif %}">
    <div class="tuc-alert__body"><p>{{ m }}</p></div>
  </div>
{% endfor %}

O nível debug vira is-debug, que não tem regra, e o aviso fica neutro.

Acessibilidade

role="alert" só no aviso que aparece depois do carregamento: a resposta de um envio, um swap do HTMX.

Por que não em todos

O aviso que já vem no HTML é lido junto com a página. Com role="alert" ele interromperia o leitor de tela à toa, e numa página com três avisos, três vezes. O que chega depois precisa do papel justamente para interromper: sem ele, a resposta do envio aparece na tela e ninguém que usa leitor de tela fica sabendo.

{# resposta parcial do HTMX: aparece depois, então interrompe #}
<div class="tuc-alert is-success" role="alert">
  <div class="tuc-alert__body"><p>Proposta enviada para {{ customer.email }}.</p></div>
</div>

O ícone leva aria-hidden="true": quem diz o que aconteceu é o texto, e o tom não pode ser a única pista.

Cor

O fundo é uma tintura leve do tom sobre --tuc-bg, e não o -soft transparente dos tokens: sobre um card colorido ou uma imagem, o transparente deixaria o texto sem contraste garantido.

Os tons leem --tuc-info, --tuc-success, --tuc-warning e --tuc-danger, e nunca --tuc-accent. A marca pode ser de qualquer cor, e o significado não pode mudar junto. Foi por isso que a informação ganhou tom próprio: com o destaque laranja, o aviso de informação ficava igual ao de alerta.

Classes

Classe ou atributo	Para quê
`.tuc-alert`	O aviso. Sem tom, neutro
`is-info` `is-success` `is-warning` `is-danger`	O tom
`> svg`	Ícone, como primeiro filho: 16px, centrado na primeira linha, na cor do tom
`.tuc-alert__body`	O texto; ocupa o espaço que sobra
`.tuc-alert__title`	Primeira linha em negrito. O resto do corpo fica na cor de apoio
`.tuc-alert__actions`	Botões à direita; abaixo de 40rem, descem para baixo do texto
`role="alert"`	Só no que aparece depois do carregamento
`--tuc-alert-tone`	A cor que o tom escolhe; fundo, borda e ícone saem dela