AppToast

Moléculas

Notificação temporária (posição fixa) com botão de fechar e anúncio para leitores de tela.

Quando usar: confirmar ou informar o resultado de uma ação ("Participação enviada!").

Quando não usar: decisões que bloqueiam o fluxo (use AppModal) ou erros de campo (use a mensagem de erro do campo).

Importar

import { AppToast } from '@handsondigital/idplugger-ui'

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppToast.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppToast.css';

const Success = () => <AppToast
    type="success"
    message="Participação enviada com sucesso!"
    duration={0} />;

const Error = () => <AppToast
    type="error"
    message="Não foi possível validar a nota fiscal."
    duration={0} />;

const Info = () => <AppToast
    type="info"
    message="O resultado sai em até 48 horas."
    duration={0} />;

const DismissWithCloseButton = () => <AppToast
    type="success"
    message="Participação enviada com sucesso!"
    duration={0} />;

Prop	Tipo	Padrão	Descrição
`message`*	`string`	`—`	Texto exibido.
`type`*	`"success" \| "info" \| "error"`	`—`	Tipo da notificação. `error` usa `role="alert"`; `success` e `info` usam `role="status"`.
`duration`	`number`	`5000`	Tempo em ms até fechar sozinho; `0` mantém o toast até o usuário fechar. Padrão: 5000.
`onDismiss`	`(() => void)`	`—`	Chamado uma única vez quando o toast é fechado (botão ou fim do tempo).