Toast

(function ToastTest() {
  return (
    <div>
      <ToastContainer />
      <Button onClick={() => toast.success("This is a toast")}>
        Trigger toast
      </Button>
    </div>
  );
})

Usage

import { ToastContainer, toast, Button } from '@raystack/apsara/v1'
 
<ToastContainer />
<Button
  variant="primary"
  onClick={() =>
    toast.success("Data loaded successfully.", {
      dismissible: true,
      action: (
        <Button size="small" onClick={() => console.log("Toast appears")}>
          Click Me
        </Button>
      ),
    })
  }>
  Trigger toast
</Button>

Toast Props

Prop	Type	Default
`description`	`string`	-
`duration`	`number`	`4000`
`position`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| "top-center" \| "bottom-center"`	`"bottom-right"`
`dismissible`	`boolean`	`true`
`icon`	`ReactNode`	-
`invert`	`boolean`	`false`
`closeButton`	`boolean`	`false`
`unstyled`	`boolean`	`false`
`action`	`{ label: string; onClick: () => void; }`	-
`cancel`	`{ label: string; onClick: () => void; }`	-
`actionButtonStyle`	`CSSProperties`	`{}`
`cancelButtonStyle`	`CSSProperties`	`{}`
`onDismiss`	`() => void`	-
`onAutoClose`	`() => void`	-
`id`	`string`	-

Toast

Usage

Toast Props

On this page