Toast — Sinapse Design System

Prontuário salvo

Suas alterações foram aplicadas com sucesso.

import { Button } from '@/components/ui/button'
import { Toaster } from '@/components/ui/sonner'
import { toast } from 'sonner'

export function ToastExample() {
  return (
    <>
      <Button
        variant="itps"
        onClick={() =>
          toast.success('Prontuário salvo', {
            description: 'Suas alterações foram aplicadas com sucesso.',
          })
        }
      >
        Mostrar toast
      </Button>
      <Toaster />
    </>
  )
}

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Toaster } from '@/components/ui/sonner'
import { toast } from 'vue-sonner'
</script>

<template>
  <Button
    variant="itps"
    @click="toast.success('Prontuário salvo', {
      description: 'Suas alterações foram aplicadas com sucesso.',
    })"
  >
    Mostrar toast
  </Button>
  <Toaster />
</template>

<div role="status" aria-live="polite" class="itps-toast itps-toast--success" data-toast>
  <span class="itps-toast__icon" aria-hidden="true">
    <i class="ti ti-check" aria-hidden="true"></i>
  </span>
  <div class="itps-toast__content">
    <p class="itps-toast__title">Prontuário salvo</p>
    <p class="itps-toast__description">Suas alterações foram aplicadas com sucesso.</p>
  </div>
  <button type="button" class="itps-toast__close" aria-label="Fechar notificação" data-toast-close>
    <i class="ti ti-x" aria-hidden="true"></i>
  </button>
</div>

Instalação

Instale Sonner e Button da sua stack e rode o comando individual ITpS em seguida. O comando itps add toast é theme-only: ele valida o slug e confirma que o contrato visual vem do tema ITpS, das classes copy-first e dos snippets desta página.

terminal · React/Next

pnpm dlx shadcn@latest add sonner button
pnpm dlx github:ITPS/sinapse-ui-cli add toast

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add sonner button
pnpm dlx github:ITPS/sinapse-ui-cli add toast

O comando individual adapta só este componente; não instala o catálogo inteiro.

Uso

Em React/Next com shadcn/ui e Vue3/Nuxt4 com shadcn-vue, use sonner: renderize Toaster uma vez no app e dispare feedback com toast.success, toast.error, toast.info ou toast.loading.

Para HTML ou wrappers finos, use itps-toast quando precisar do contrato copy-first. O site inicializa .itps-toast[data-toast] e fecha controles marcados com data-toast-close.

Use Toast para feedback transitório após ação do usuário. Para aviso persistente use Banner; para contexto local use Callout; para validação de campo use erro do Field.

Exemplos

Estrutura

Peça	React/Next e Vue3/Nuxt4	HTML
Container	`Toaster`	container fixo da aplicação
Disparo	`toast.success(...)`	inserir/remover `.itps-toast`
Toast	Sonner renderiza	`itps-toast[data-toast]`
Título	`message`	`itps-toast__title`
Descrição	`description`	`itps-toast__description`
Fechar	Sonner gerencia	`[data-toast-close]`

Stack e status

Use status para comunicar severidade: success e info são polite; error pode usar role="alert" quando a falha precisa ser anunciada imediatamente.

Enviando documento

Aguarde a conclusão do upload.

Falha ao salvar

Verifique a conexão e tente novamente.

Tentar novamente

<div class="flex w-full max-w-[480px] flex-col gap-2">
  <div role="status" aria-live="polite" class="itps-toast itps-toast--loading" data-toast>
    <span class="itps-toast__icon" aria-hidden="true">
      <span class="itps-toast__spinner" aria-hidden="true"></span>
    </span>
    <div class="itps-toast__content">
      <p class="itps-toast__title">Enviando documento</p>
      <p class="itps-toast__description">Aguarde a conclusão do upload.</p>
    </div>
  </div>

  <div role="alert" aria-live="assertive" class="itps-toast itps-toast--error" data-toast>
    <span class="itps-toast__icon" aria-hidden="true">
      <i class="ti ti-alert-circle" aria-hidden="true"></i>
    </span>
    <div class="itps-toast__content">
      <p class="itps-toast__title">Falha ao salvar</p>
      <p class="itps-toast__description">Verifique a conexão e tente novamente.</p>
      <div class="itps-toast__actions">
        <a href="#" class="itps-toast__action">Tentar novamente</a>
      </div>
    </div>
    <button type="button" class="itps-toast__close" aria-label="Fechar notificação" data-toast-close>
      <i class="ti ti-x" aria-hidden="true"></i>
    </button>
  </div>
</div>

API copy-first

Classe/atributo	Uso
`itps-toast`	Superfície da notificação.
`itps-toast--info`, `itps-toast--success`, `itps-toast--alert`, `itps-toast--error`, `itps-toast--loading`	Status visual.
`itps-toast__icon`, `itps-toast__content`, `itps-toast__title`, `itps-toast__description`, `itps-toast__actions`, `itps-toast__close`	Anatomia interna.
`data-toast`	Marca a notificação inicializável pelo script.
`data-toast-close`	Fecha e remove a notificação atual.
`role`, `aria-live`	Define prioridade de anúncio.
`aria-label`	Nomeia o botão de fechar.
`aria-hidden="true"`	Esconde ícones decorativos de tecnologias assistivas.

Acessibilidade

Use role="status" e aria-live="polite" para sucesso, informação, aviso e loading. Use role="alert" e aria-live="assertive" só para falhas que precisam interromper a fila de anúncio.