Toast — Sinapse Design System

Default

Title + texto + close. Use após ação imediata: salvar, copiar, deletar.

Prontuário salvo

Suas alterações foram aplicadas com sucesso.

<Toast title="Prontuário salvo" text="Suas alterações foram aplicadas com sucesso." />

<template>
<div role="status" class="itps-card itps-card--elevated w-[480px] flex items-start gap-3">
  <span class="material-symbols-outlined text-success shrink-0">check_circle</span>
  <div class="flex-1">
    <p class="font-semibold">Prontuário salvo</p>
    <p class="text-sm text-muted-foreground mt-0.5">Suas alterações foram aplicadas com sucesso.</p>
  </div>
  <button class="itps-btn itps-btn--ghost itps-btn--icon itps-btn--sm" aria-label="Fechar">
    <span class="material-symbols-outlined">close</span>
  </button>
</div>
</template>

<div role="status" className="itps-card itps-card--elevated w-[480px] flex items-start gap-3">
<span className="material-symbols-outlined text-success shrink-0">check_circle</span>
<div className="flex-1">
  <p className="font-semibold">Prontuário salvo</p>
  <p className="text-sm text-muted-foreground mt-0.5">Suas alterações foram aplicadas com sucesso.</p>
</div>
<button className="itps-btn itps-btn--ghost itps-btn--icon itps-btn--sm" aria-label="Fechar">
  <span className="material-symbols-outlined">close</span>
</button>
</div>

<div role="status" class="itps-card itps-card--elevated w-[480px] flex items-start gap-3">
<span class="material-symbols-outlined text-success shrink-0">check_circle</span>
<div class="flex-1">
  <p class="font-semibold">Prontuário salvo</p>
  <p class="text-sm text-muted-foreground mt-0.5">Suas alterações foram aplicadas com sucesso.</p>
</div>
<button class="itps-btn itps-btn--ghost itps-btn--icon itps-btn--sm" aria-label="Fechar">
  <span class="material-symbols-outlined">close</span>
</button>
</div>

Statuses semânticos

iconStatus controla o círculo de feedback à esquerda.

Sincronizado

Última atualização há 2s.

Conexão lenta

Sua sessão pode ser interrompida.

Falha ao salvar

Verifique a conexão e tente novamente.

Tentar novamente

Enviando documento

Aguarde a conclusão do upload.

<Toast iconStatus="success" title="Sincronizado" text="Última atualização há 2s." />
<Toast iconStatus="alert" title="Conexão lenta" text="Sua sessão pode ser interrompida." />
<Toast iconStatus="error" title="Falha ao salvar" text="Verifique a conexão e tente novamente." link1Text="Tentar novamente" link1Href="#" />
<Toast iconStatus="loading" title="Enviando documento" text="Aguarde a conclusão do upload." />

Com action links

Até 2 links inline para CTAs secundárias (desfazer, ver detalhes).

Item arquivado

Você pode desfazer essa ação nos próximos 30s.

Desfazer Ver arquivados

<Toast
iconStatus="success"
title="Item arquivado"
text="Você pode desfazer essa ação nos próximos 30s."
link1Text="Desfazer"
link1Href="#"
link2Text="Ver arquivados"
link2Href="#"
/>

Sem ícone

Compacto, só texto + close.

Copiado

Link copiado para área de transferência.

<Toast showIcon={false} title="Copiado" text="Link copiado para área de transferência." />

Posicionamento

O componente entrega a anatomia. Posicionamento (canto da tela, stack) fica a cargo do consumer — wrapper com position: fixed + bottom-right é o padrão.

<div class="fixed bottom-6 right-6 z-50 flex flex-col gap-2">
  <Toast iconStatus="success" title="Salvo" text="..." />
</div>

Props

Prop	Tipo	Default	Descrição
`title`	`string`	obrigatório	Título.
`text`	`string`	obrigatório	Mensagem.
`showIcon`	`boolean`	`true`	Exibe FeedbackIcon.
`iconStatus`	`'default-primary' \| 'default-secondary' \| 'success' \| 'alert' \| 'error' \| 'loading'`	`'default-secondary'`	Tipo de ícone.
`icon`	`string`	—	Material Symbol custom (override).
`link1Text`	`string`	—	Primeiro link de ação.
`link1Href`	`string`	—	URL do primeiro link.
`link2Text`	`string`	—	Segundo link de ação.
`link2Href`	`string`	—	URL do segundo link.
`closable`	`boolean`	`true`	Mostra botão X.
`toastId`	`string`	auto	ID estável para event delegation.
`class`	`string`	—	Classes adicionais.