Toast

Toast wrapper and function. Toast internally uses Sonner
1(function ToastTest() {
2  return (
3    <div>
4      <ToastContainer />
5      <Button onClick={() => toast.success("This is a toast")}>
6        Trigger toast
7      </Button>
8    </div>
9  );
10})

Anatomy

Import and assemble the component:

1import { ToastContainer, toast } from '@raystack/apsara'
2

3<ToastContainer />

API Reference

Prop

Type

Examples

Basic Usage

1import { ToastContainer, toast, Button } from '@raystack/apsara'
2

3<ToastContainer />
4<Button
5  variant="primary"
6  onClick={() =>
7    toast.success("Data loaded successfully.", {
8      dismissible: true,
9      action: (
10        <Button size="small" onClick={() => console.log("Toast appears")}>
11          Click Me
12        </Button>
13      ),
14    })
15  }>
16  Trigger toast
17</Button>

Accessibility

  • Uses role="alert" for important notifications
  • Automatically announced to screen readers via aria-live region
  • Dismissible toasts support keyboard interaction