Toast

Create a store and host once, then send notifications from anywhere:

const { toaster, Toaster } = createToaster();

function App() {
  return <Toaster />;
}

toaster.success({ title: 'Saved' });

import { useMemo } from 'react';
import { Button, createToaster } from '@manti-ui/react';

export default function ToastBasic() {
  const { toaster, Toaster } = useMemo(() => createToaster(), []);

  return (
    <div className="flex flex-wrap gap-2 justify-center">
      <Button
        onClick={() =>
          toaster.create({
            title: 'Mantı boiling',
            description: 'They float when they are ready — about four minutes.',
          })
        }
      >
        Default
      </Button>
      <Button
        variant="success"
        onClick={() =>
          toaster.success({
            title: 'Saved',
            description: 'Your recipe is in the cookbook.',
          })
        }
      >
        Success
      </Button>
      <Button
        variant="danger"
        onClick={() =>
          toaster.error({
            title: 'Dough too dry',
            description: 'Add a splash of water and knead again.',
          })
        }
      >
        Error
      </Button>
      <Button
        variant="info"
        onClick={() =>
          toaster.info({ title: 'Tip', description: 'Rest the dough first.' })
        }
      >
        Info
      </Button>
      <Toaster />
    </div>
  );
}

API

The table describes createToaster(options).

Prop	Type	Default	Description
`placement`	`'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end'`	`'bottom-end'`	Corner the stack is anchored to (passed to createToaster).
`overlap`	`boolean`	`true`	Stack toasts on top of each other until hovered.
`max`	`number`	—	Maximum simultaneously visible toasts; extras queue.
`gap`	`number`	—	Gap between toasts, in px.
`duration`	`number`	—	Default visible duration, in ms.
`swipe`	`boolean`	`true`	Allow dismissing a toast by swiping it toward its anchored edge.
`translations`	`{ closeTriggerLabel?: string }`	`{ closeTriggerLabel: 'Close' }`	Factory-level accessible wording, overridable by per-toast options.

Styling

Anatomy

Part	Selector	Description
`group`	`[data-scope="toast"][data-part="group"]`	The portal region that hosts the toast stack.
`root`	`[data-scope="toast"][data-part="root"]`	A single toast surface; carries the type variant.
`indicator`	`[data-scope="toast"][data-part="indicator"]`	The leading type icon.
`title`	`[data-scope="toast"][data-part="title"]`	The toast title.
`description`	`[data-scope="toast"][data-part="description"]`	The toast description.
`close-trigger`	`[data-scope="toast"][data-part="close-trigger"]`	The button that dismisses the toast.
`action-trigger`	`[data-scope="toast"][data-part="action-trigger"]`	An optional action button.

Tokens

Token	Controls
`--manti-toast-width`	width
`--manti-toast-radius`	radius

Last updated 13 September 2026