Toast

Generates toast notifications. Wrap a tree in UiToastProvider, then call useToastManager().add() (or the exposed add on the provider) to queue a toast. The toast rests on the color wash with no border. The action and close shift lightness on hover and focus. The title and description are Light.

Anatomy

<UiToastProvider>
  <UiToastPortal>
    <UiToastViewport>
      <UiToastRoot v-for="toast in toasts" :key="toast.id" :toast="toast">
        <UiToastContent>
          <UiToastTitle />
          <UiToastDescription />
          <UiToastClose />
        </UiToastContent>
      </UiToastRoot>
    </UiToastViewport>
  </UiToastPortal>
</UiToastProvider>

Parts

• Provider — timeout defaults to 5000ms. limit defaults to 3; extra toasts get data-limited.
• Portal / Viewport — landmark region. F6 moves focus into it.
• Root — one toast. Enter/leave use data-starting-style / data-ending-style.
• Content / Title / Description — body. Title and description read from the toast object when the slot is empty.
• Close / Action — dismiss, or run toast.action then close.

useToastManager() inside the provider exposes add, update, close, promise, and the toasts list.