Toast

An opinionated toast component for React.

Props

This package re-exports toast and Toaster from sonner with default styles.

• toast(message, options) shows a toast. Options include description, action, duration, etc.
• <Toaster {...props} /> renders the container. All sonner ToasterProps are supported.

Example

import { Toaster, toast } from '@vuer-ai/vuer-uikit';

function Demo() {
  return (
    <>
      <Button onClick={() => toast('Saved', { description: 'All changes persisted.' })}>
        Save
      </Button>
      <Toaster position="top-right" />
    </>
  );
}

Usage

<Button
  variant="outline"
  onClick={() =>
    toast("Event has been created.Event has been created.Event has been created.Event has been created.Event has been created", {
      description: "Sunday, December 03, 2023 at 9:00 AM.Sunday, December 03, 2023 at 9:00 AM.Sunday, December 03, 2023 at 9:00 AM.Sunday, December 03, 2023 at 9:00 AM",
      action: {
        label: "Confirm",
      },
      duration: Infinity,
    })
  }
>
  Action Toast
</Button>

<Button
  className="toast-button"
  onClick={() => {
    toast('This is a toast');
  }}
>
  Toast
</Button>