Toast

Notificação (toast) — um retorno curto depois de uma ação, que aparece num canto da tela e some em poucos segundos. Use para confirmar o que aconteceu sem tirar a pessoa do que ela está fazendo.

InstalaçãoCopy Anchor Link

Configure o Camaleo uma vez (Instalação) e importe o que precisar.

import { ToastProvider, useToast } from "@camaleo/react";

Um provider para o app inteiroCopy Anchor Link

Coloque o ToastProvider uma vez só, perto da raiz, dentro do StyleProvider. Ele cria o canto onde os toasts se empilham e a região que o leitor de tela lê. Com dois providers, você tem duas pilhas uma sobre a outra e o leitor de tela fala em dobro.

import { StyleProvider, ToastProvider } from "@camaleo/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
	return (
		<html lang="pt-BR">
			<body>
				<StyleProvider styleName="editorial">
					<ToastProvider closeLabel="Fechar">{children}</ToastProvider>
				</StyleProvider>
			</body>
		</html>
	);
}

Depois é só chamar useToast() em qualquer componente abaixo dele:

const toast = useToast();
toast.add({ title: "Preferências salvas", type: "success" });

AnatomiaCopy Anchor Link

Um canto da tela (o viewport) que empilha os toasts. Cada toast tem o ícone do tom, um título, uma descrição e uma ação opcionais e um botão de fechar.

ExemplosCopy Anchor Link

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima. Cada um tem seu próprio ToastProvider só para funcionar sozinho nesta página; no seu app, use o da raiz.

Em contextoCopy Anchor Link

O toast confirma ações feitas em outro ponto da página. São pedaços inteiros de interface para copiar, no estilo que você escolheu.

Boas práticasCopy Anchor Link

PropsCopy Anchor Link

Styling hooksCopy Anchor Link

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no viewport.

AcessibilidadeCopy Anchor Link

• O toast é lido sem pressa, depois do que o leitor de tela está falando. Com priority: "high", ele interrompe.
• O toast nunca pega o foco, então nunca atrapalha quem está digitando.
• O tempo para enquanto o ponteiro está sobre a pilha ou o foco está dentro dela.
• Se o toast tem uma ação, garanta que dá para fazer a mesma coisa em outro lugar da página, ou use timeout: 0. Nem todo mundo chega nele em 5 segundos.

RelacionadosCopy Anchor Link