Toast

Toast confirma que algo aconteceu, longe de onde aconteceu. Decida se a pessoa vai precisar da mensagem depois de seguir adiante — se não, diga inline e poupe a interrupção.

Exemplos

Um toast sozinho

O botão de fechar só existe quando você passa onClose. Um toast sem ele precisa sumir sozinho; um toast com ele ainda não pode ser necessário fechar para a interface fazer sentido.

Project archived

Dentro de um ToastStack

ToastStack é o container fixo no canto inferior direito, e é ele que impede vários toasts de se cobrirem. Aperte o botão mais de uma vez para vê-los enfileirar.

Quando usar

Use Toast para uma confirmação breve e não bloqueante de algo que a pessoa acabou de fazer, quando ela não precisa agir sobre isso.

Procure outra coisa quando:

A mensagem é sobre conteúdo da página — use Alert, que fica ao lado dele.
Algo precisa de decisão antes de continuar — use Dialog. Um toast pode passar despercebido.
A mensagem carrega informação que alguém vai precisar depois — um toast que sai leva junto.

Acessibilidade

Toast renderiza role="status", uma live region polida: é anunciado na próxima pausa, não no instante em que aparece. Nunca coloque a única cópia de uma informação importante num toast.
ToastStack é position: fixed no canto inferior direito da viewport. Ele fica por cima do que estiver ali, então mantenha os toasts curtos e poucos.
O botão de fechar só aparece com onClose, e o nome acessível dele tem como padrão a string em inglês "Close notification"; passe closeLabel para traduzi-lo em um produto localizado.
tone colore apenas o ícone. As palavras precisam dizer se algo deu certo ou errado.

API e código

Nome	Tipo	Obrigatória	Descrição
`tone`	`'info' \| 'success' \| 'danger'`	—	Icon color tone. Default `"info"`.
`icon`	`ReactNode`	—	Optional icon displayed before the message.
`onClose`	`() => void`	—	Called when the optional close button is activated.
`closeLabel`	`string`	—	Accessible name for the close button. Default: `"Close notification"`.
`children`	`ReactNode`	Obrigatória	Toast message content.

$store.lyraToasts

Membro	Tipo	Obrigatória	Descrição
`items`	`QueuedToast[]`	Obrigatória	The current queue, in the order notifications were added.
`duration`	`number`	Obrigatória	Default auto-dismiss delay in milliseconds. Default: `4000`.
`closeLabel`	`string`	Obrigatória	Accessible name passed to every toast close button. Default: `"Close notification"`.
`init`	`(): void`	Obrigatória	Registers the singleton's browser-only Livewire event bridge.
`toast`	`(message: string, options?: LyraToastOptions): number`	Obrigatória	Queues a notification and returns its store-local identifier.
`success`	`(message: string, options?: LyraToastOptions): number`	Obrigatória	Queues a success notification, overriding a supplied tone.
`error`	`(message: string, options?: LyraToastOptions): number`	Obrigatória	Queues a danger notification, overriding a supplied tone.
`info`	`(message: string, options?: LyraToastOptions): number`	Obrigatória	Queues an informational notification, overriding a supplied tone.
`dismiss`	`(id: number): void`	Obrigatória	Removes a notification and clears its pending auto-dismiss timer, if any.

A pilha posiciona; o toast é um cartão escuro simples:

html

<div class="lyra-toast-stack">
  <div class="lyra-toast" role="status">
    <span class="lyra-toast__icon lyra-toast__icon--success"></span>
    <span>Projeto arquivado</span>
    <button class="lyra-toast__close" type="button" aria-label="Close notification">×</button>
  </div>
</div>

<lyra:toast> Gerado do lyra-ds/blade v0.10.0.

Prop	Padrão	Obrigatória	Valores de exemplo
`tone`	`'info'`	—	—

blade

<lyra:toast tone="success">Project settings saved.</lyra:toast>