Toast

A succinct message that is displayed temporarily.

Usage

Import all parts and piece them together. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
const { Button } = VM.require("uiisnear.near/widget/button");
const { Toaster, ToastAction, ToastConf } = VM.require(
  "uiisnear.near/widget/toast"
);
 
const [toasts, setToasts] = useState([]);
 
const openToast = ({ ...props }) => {
  setToasts([
    {
      ...props,
      open: true,
      onOpenChange: (open) => {
        if (!open) setToasts([]);
      },
    },
  ]);
};
 
if (Tailwind == undefined) return "";

<Tailwind>
  <Button
    onClick={() => {
      openToast({
        title: "Scheduled: Catch up",
        description: "Friday, February 10, 2023 at 5:57 PM",
      })
    }}
  >
    Show Toast
  </Button>
</Tailwind>

API Reference

ToastProvider

The provider that wraps your toasts and toast viewport. It usually wraps the application.

ToastViewport

The fixed area where toasts appear. Users can jump to the viewport by pressing a hotkey. It is up to you to ensure the discoverability of the hotkey for keyboard users.

Toast

The button that toggles the popover. By default, the PopoverContent will position itself against the trigger.

ToastTitle

An optional title for the toast.

ToastDescription

The toast message.

ToastAction

An action that is safe to ignore to ensure users are not expected to complete tasks with unexpected side effects as a result of a time limit.

ToastClose

A button that allows users to dismiss the toast before its duration has elapsed.

Classnames

Classnames available to customize the component.

Examples

Simple

With title

With Action

Destructive