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})

Usage

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

Toast Props

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>