Toast
Confirma resultados e comunica feedback transitório sem interromper o fluxo atual.
Design
Preview funcional
Executado pelo runtime JavaScript estável ds-tis/toast.
Anatomia
Alterações salvas
Seu rascunho foi atualizado.
Demo
Uso
Quando usar
- Uma ação concluída precisa de confirmação breve sem bloquear a tarefa.
- O feedback pode desaparecer sem remover informação necessária para continuar.
Quando não usar
- A mensagem exige decisão, confirmação crítica ou correção antes de continuar.
- O conteúdo precisa permanecer associado a um campo ou contexto específico da página.
Implementação
- Status
- Estável
- Distribuição
- Pacote npm
Instalação
npm install ds-tispnpm add ds-tisyarn add ds-tisbun add ds-tisImportações
import 'ds-tis/css'
import { showToast } from 'ds-tis/toast'
showToast({
type: 'success',
style: 'subtle',
title: 'Preferências salvas',
description: 'As alterações já estão disponíveis para esta conta.',
})Markup
<button class="ds-button ds-button--primary ds-button--md" type="button">
<span class="ds-button__label">Salvar preferências</span>
</button>Contrato da implementação Web
Runtime obrigatório
Fila, live regions, auto-hide, pausa, dismiss e actions dependem de ds-tis/toast. Sem action, a duração padrão é 5 segundos. Com action, não há auto-hide por padrão; uma duração explícita nunca fica abaixo de 10 segundos. O limite é de cinco toasts visíveis e duas actions por toast.
O runtime emite ds-toast-show, ds-toast-dismiss e ds-toast-action na região, com bubbling e detalhes do Toast afetado.
Acessibilidade
Acessibilidade
role="status". Error usa role="alert". O runtime não move foco; hover e foco pausam o timer; Escape dispensa o toast que contém o foco.
Responsabilidade da saída
Inicialize o runtime público após o render e destrua-o quando a view responsável for desmontada.
Evidência de validação
Coberta pelo Storybook estável, testes do runtime público quando aplicável, cenários de teclado, responsividade e Axe.