Usage

Place ToastViewport once near the root of your app, then call useToast from any component.

<script setup lang="ts">
import { ToastViewport, useToast } from '@astryx-vue/core/Toast'

const toast = useToast()

toast({ body: 'Saved successfully', type: 'success' })
</script>

<template>
  <div>
    <button @click="toast({ body: 'Saved' })">
      Save
    </button>
    <ToastViewport />
  </div>
</template>

Best practices

Guidance	Practice
Recommended	Put ToastViewport at the top level so toasts overlay every page.
Recommended	Use type="error" for failures and rely on role="alert".
Recommended	Keep toast copy short — one line describing the outcome is enough.
Don't	Flood the screen with many toasts at once.
Don't	Use toasts for actions that need user confirmation.

Examples

Basic

Click the buttons to trigger toasts of different types and durations.

Stack

Several toasts stack in the viewport and keep their order as they appear.