Toast

Playground

'use client';
import { useEffect } from 'react';
import { ToastProvider, showToast, dismissToast, Button, Icon } from '@mbsw/ui';
import { CircleCheck } from 'lucide-react';

export default function Demo() {
  const settings = {
    "showIcon": true,
    "title": "Title",
    "description": "Description"
  };
  useEffect(
    () => () => {
      dismissToast();
    },
    [],
  );

  return (
    <>
      <ToastProvider containerLabel={"Notification"} visibleToasts={3} />
      <Button
        variant="solid"
        tone="secondary"
        onClick={() =>
          showToast({
            title: settings.title,
            leadingIcon: settings.showIcon ? (
              <Icon icon={CircleCheck} size="md" decorative />
            ) : undefined,
            description: (
              <span style={{ whiteSpace: 'pre-wrap' }}>
                {settings.description}
              </span>
            ),
            duration: 5000,
            closeLabel: "Close notification",
          })
        }
      >
        open
      </Button>
      <Button variant="outline" tone="secondary" onClick={() => dismissToast()}>
        close
      </Button>
    </>
  );
}

Properties

Icon

Content

Title

Description

Usage

Add ToastProvider once in your app. Call showToast to add a notification, then pass its returned identifier to dismissToast to close it. Call dismissToast without an argument to close all notifications. Keep important results available on the page after a toast disappears.

'use client';
import { ToastProvider, showToast, Button } from '@mbsw/ui';

export default function Example() {
  return (
    <>
      <ToastProvider containerLabel={"Notification"} />
      <Button
        onClick={() =>
          showToast({
            title: 'Title',
            description: 'Description',
            closeLabel: "Close notification",
          })
        }
      >
        open
      </Button>
    </>
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

dismissToastshowToastToastToastProvider