Skip to content

index.mdx

Latest commit

 

History

History
98 lines (60 loc) · 2.72 KB

index.mdx

File metadata and controls

98 lines (60 loc) · 2.72 KB
title Toast
description Displays temporary notification messages using Base UI Toast primitives.
source packages/raystack/components/toast

import { preview, basicDemo, typesDemo, descriptionDemo, actionDemo, promiseDemo, positionDemo, updateDemo } from "./demo.ts";

Anatomy

Import and set up the toast system:

import { Toast, toastManager } from '@raystack/apsara'

// Wrap your app with Toast.Provider (once, at root)
<Toast.Provider position="bottom-right">
  <App />
</Toast.Provider>

// Trigger toasts from anywhere
toastManager.add({ title: 'Hello!', type: 'success' })

API Reference

Toast.Provider

Renders the toast viewport and manages the toast lifecycle. Place once at the root of your app.

toastManager.add(options)

Creates a new toast and returns its unique ID. The toastManager can be imported and used anywhere — including outside React components (e.g., API interceptors, utility functions).

toastManager methods

Method Signature Description
add (options) => string Create a toast, returns its ID
close (id: string) => void Close a specific toast by ID
update (id: string, options) => void Update an existing toast's properties
promise (promise, { loading, success, error }) => Promise Create a toast that tracks a promise lifecycle

Examples

Basic Toast

Type Variants

Use the type prop to change the visual styling of the toast.

With Title and Description

With Action Button

Use actionProps to render an action button inside the toast.

Promise Toast

Track an async operation with automatic loading, success, and error states.

Positioning

Control where toasts appear on screen with the position prop on Toast.Provider.

Close and Update

Create a toast, then update or close it programmatically using the returned ID.

Accessibility

  • Uses aria-live regions for screen reader announcements
  • priority: 'high' uses role="alert" (assertive) for urgent notifications
  • priority: 'low' (default) uses role="status" (polite) for non-urgent notifications
  • Close button has aria-label="Close toast"
  • Supports keyboard navigation and Escape to dismiss
  • Swipe-to-dismiss gesture support
  • Respects motion preferences: toast enter/exit motion is enabled only when prefers-reduced-motion: no-preference