Banner — Sinapse Design System

Statuses

Quatro variantes semânticas — info, success, alert, error.

Dica! Sistema atualizado às 14h. Novas features no changelog.

Sucesso! Prontuário salvo.

Atenção! Manutenção programada para sábado às 22h.

Erro! Falha de sincronização. Tentando novamente…

<Banner status="info" text="Sistema atualizado às 14h." linkText="Ver mudanças" linkHref="#" />
<Banner status="success" text="Prontuário salvo." />
<Banner status="alert" text="Manutenção sábado 22h." />
<Banner status="error" text="Falha de sincronização." />

<template>
<div class="flex items-center gap-3 bg-info/10 border-l-4 border-info p-4 text-foreground">
  <span class="material-symbols-outlined text-info">info</span>
  <p class="flex-1 text-sm">Sistema atualizado às 14h.</p>
  <a href="#" class="itps-link text-sm">Ver mudanças</a>
</div>
<div class="flex items-center gap-3 bg-success/10 border-l-4 border-success p-4 text-foreground">
  <span class="material-symbols-outlined text-success">check_circle</span>
  <p class="flex-1 text-sm">Prontuário salvo.</p>
</div>
</template>

<>
<div className="flex items-center gap-3 bg-info/10 border-l-4 border-info p-4 text-foreground">
  <span className="material-symbols-outlined text-info">info</span>
  <p className="flex-1 text-sm">Sistema atualizado às 14h.</p>
  <a href="#" className="itps-link text-sm">Ver mudanças</a>
</div>
<div className="flex items-center gap-3 bg-success/10 border-l-4 border-success p-4 text-foreground">
  <span className="material-symbols-outlined text-success">check_circle</span>
  <p className="flex-1 text-sm">Prontuário salvo.</p>
</div>
</>

<div class="flex items-center gap-3 bg-info/10 border-l-4 border-info p-4 text-foreground">
<span class="material-symbols-outlined text-info">info</span>
<p class="flex-1 text-sm">Sistema atualizado às 14h.</p>
<a href="#" class="itps-link text-sm">Ver mudanças</a>
</div>
<div class="flex items-center gap-3 bg-success/10 border-l-4 border-success p-4 text-foreground">
<span class="material-symbols-outlined text-success">check_circle</span>
<p class="flex-1 text-sm">Prontuário salvo.</p>
</div>

Com título customizado

Override o título default por status.

Atenção: Token de acesso expira em 3 dias.

Renovar agora

<Banner status="alert" title="Atenção:" text="Token de acesso expira em 3 dias." linkText="Renovar agora" linkHref="#" />

Padrão	Quando usar
Banner	Mensagem persistente, full-width no topo da página/layout
Callout	Mensagem contida dentro de seção, layout-bound
Toast	Notificação flutuante e transient após ação

Props

Prop	Tipo	Default	Descrição
`status`	`'info' \| 'success' \| 'alert' \| 'error'`	`'info'`	Variante semântica.
`title`	`string`	por status	Override do título default.
`text`	`string`	obrigatório	Mensagem principal.
`linkText`	`string`	—	Texto do CTA.
`linkHref`	`string`	—	URL do CTA.
`class`	`string`	—	Classes adicionais.

Statuses

Com título customizado

Banner vs Callout vs Toast

Props