Toast

The Toast component displays brief messages near the element that triggered them. Use it for lightweight notifications, confirmations, or errors.

Default

<Button onClick={() => message({ text: "Default toast", type: "default" })}>
  Default
</Button>

Success

<Button onClick={() => message({ text: "Success toast", type: "success" })}>
  Success
</Button>

Error

<Button onClick={() => message({ text: "Error toast", type: "error" })}>
  Error
</Button>

Usage

Import the useToasts hook from the Toast component and use message() to trigger toasts. The Toast component can be referenced using the following format:

import { useToasts } from "./ToastMessage";

const { message } = useToasts();

message({
  text: "This is a toast",
  type: "success", // default | success | error
});