Toast

A fixed-position notification rendered in document.body via a React portal. It slides up from the bottom of the screen when opened and slides back down when closed. The toast auto-dismisses after the configured duration by calling onClose. An optional title and a manual close button are supported.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the toast is visible. | | message | string | Yes | — | Main text content of the toast. | | title | string | No | — | Optional bold heading displayed above the message. | | color | string | No | theme primary | Background color of the toast. | | duration | number | No | 3000 | Milliseconds before onClose is automatically called. Set to 0 to disable auto-dismiss. | | onClose | () => void | No | — | Callback to close the toast (used for both auto-dismiss and the manual close button). | | zIndex | number | No | 999999 | Z-index of the toast. | | containerStyle | React.CSSProperties | No | — | Inline styles for the toast container. | | titleStyle | React.CSSProperties | No | — | Inline styles for the title text. | | messageStyle | React.CSSProperties | No | — | Inline styles for the message text. |

Usage

Basic

import { useState } from 'react';
import Toast from '@/components/Toast';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Show Toast</button>
      <Toast
        isOpen={open}
        message="Product saved successfully."
        onClose={() => setOpen(false)}
      />
    </>
  );
}

With title and custom color

import { useState } from 'react';
import Toast from '@/components/Toast';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Show Error</button>
      <Toast
        isOpen={open}
        title="Error"
        message="Something went wrong. Please try again."
        color="#e74c3c"
        duration={5000}
        onClose={() => setOpen(false)}
      />
    </>
  );
}

Persistent toast (no auto-dismiss)

import { useState } from 'react';
import Toast from '@/components/Toast';

export default function Example() {
  const [open, setOpen] = useState(true);

  return (
    <Toast
      isOpen={open}
      message="You have unsaved changes."
      duration={0}
      onClose={() => setOpen(false)}
    />
  );
}