Toast
Recipe React distribuída como source, com manager Base UI e classes/tokens públicos do Toast TIS.
Design
Preview funcional
Executado pela recipe React distribuída via shadcn e baseada em Base UI.
Carregando preview funcional…
Abrir playground React · shadcn/Base UI
Anatomia
Alterações salvas
Seu rascunho foi atualizado.
1 Icon · 2 Content · 3 Title · 4 Description · 5 Actions (Button ghost/sm) · 6 Close
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.
Composição React
import {
ToastProvider,
showToast,
} from "@/components/ui/toast"
function App() {
return (
<ToastProvider>
<button onClick={() => showToast({
type: "success",
title: "Preferências salvas",
description: "As alterações já estão disponíveis.",
})}>
Salvar preferências
</button>
</ToastProvider>
)
}Implementação
- Status
- Beta
- Distribuição
- Source via shadcn
Instalação
Configure o namespace uma única vez na integração React.
npx shadcn@latest add @tis/toastpnpm dlx shadcn@latest add @tis/toastyarn dlx shadcn@latest add @tis/toastbunx --bun shadcn@latest add @tis/toastContrato público
- Item do registry
@tis/toast- Provider
- Base UI
- Distribuição
- Source copiado para a aplicação
- Status
- Beta
Acessibilidade
Acessibilidade
Acessibilidade
Success, warning e info são anunciados por uma região 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
Preserve a semântica da Base UI e teste conteúdo real, foco visível e nomes acessíveis na aplicação consumidora.
Evidência de validação
Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.