ToastProvider

ToastProvider é dono de uma fila de confirmações curtas e não bloqueantes. Escolha-o quando um descendente precisar anunciar um resultado sem propagar estado de notificação por todos os componentes intermediários; use Toast e ToastStack diretamente quando esse estado de apresentação já for seu.

Exemplos

On this page, notifications appear in normal flow inside their own preview so both independent providers remain readable and their controls stay reachable. This positioning is documentation-only: the copied examples and the library default still use a stack fixed to the bottom-right of the viewport.

Quando usar

Use ToastProvider quando vários descendentes precisarem de uma API imperativa compartilhada de notificações.

Prefira outro componente quando:

• Você já controla a lista de notificações visíveis — use diretamente os componentes de baixo nível Toast e ToastStack.
• A mensagem pertence ao conteúdo da página — use Alert.
• Alguém precisa decidir antes de continuar — use Dialog.

Acessibilidade

• ToastProvider announces info/success through a persistent polite region and danger through a persistent assertive region, both additions-only. Composed rows have no individual role. Never use a toast as the only place for important information.
• Cada toast enfileirado recebe um botão de fechar cujo nome acessível vem de closeLabel, com padrão "Close notification". Forneça uma cópia localizada quando necessário.
• O ToastStack do provider fica fixo no canto inferior direito do viewport. Mantenha mensagens breves e não deixe a pilha substituir um status persistente.

Timing and dismissal

React ToastProvider and the Alpine toast store resolve duration when a notification is queued: per-toast duration overrides explicit provider/store configuration, which overrides the implicit tone policy. Info and success default to 8000 ms; danger, including error(), defaults to persistent. 0 always means persistent. Explicit global 8000 also makes danger expire. Changing configuration affects new notifications only.

Pointer hover and focus inside a row independently pause its remaining time. The countdown resumes only after both leave; moving between descendants does not restart it. Give action-bearing React messages an explicit { duration: 0 }; the provider does not inspect their content.

Dismissing a focused row returns focus to its enqueue-time opener if that element is still eligible. Removed, disabled, hidden or inert openers, and openers inside a toast stack, use the same persistent stack instead. This named region (a landmark) remains focusable and visibly outlined even when empty. Unfocused dismissals do not move focus, and deliberate action focus moves are preserved. The region adds no live announcement; polite and assertive regions announce additions only.

Migration: set duration={4000} on React ToastProvider or assign Alpine.store('lyraToasts').duration = 4000 to restore the previous default delay for all tones. Per-toast overrides still take precedence. These timing changes apply to React and Alpine; the imported Blade API below is unchanged.

API e código

<div class="lyra-toast-stack">
  <div class="lyra-toast" role="status">
    <span class="lyra-toast__icon lyra-toast__icon--success" aria-hidden="true">✓</span>
    <span>Projeto publicado</span>
    <button class="lyra-toast__close" type="button" aria-label="Fechar notificação">×</button>
  </div>
</div>