Toast

A succinct message that is displayed temporarily.

"use client";

import { Button } from "@smartacteam/ambient-web/button";
import { useToast } from "@smartacteam/ambient-web/toaster";

export function ToastDemo() {
  const toast = useToast();

  return (
    <Button
      variant="primary"
      onClick={() =>
        toast({
          title: "Heads up!",
          description:
            "Your session will expire in 5 minutes. Save your work to avoid losing progress.",
          action: (
            <>
              <Button variant="default" onClick={() => alert("Dismiss")}>
                Dismiss
              </Button>
              <Button variant="primary" onClick={() => alert("Save Now")}>
                Save Now
              </Button>
            </>
          ),
        })
      }
    >
      Show Toast
    </Button>
  );
}

Usage

import { useToast } from "@smartacteam/ambient-web/toaster";

export const ToastDemo = () => {
  const toast = useToast();
 
  return (
    <Button
      onClick={() => {
        toast({
          title: "Scheduled: Catch up",
          description: "Friday, February 10, 2023 at 5:57 PM",
        });
      }}
    >
      Show Toast
    </Button>
  );
};

Variants

The toast component supports five variants: default, info, success, warning, and error. Each variant uses different colors and is appropriate for different types of notifications. When demonstrating multiple variants at once, give every Toast.Root its own state so triggering one toast does not unintentionally toggle the others. A Toast.Root with no variant renders as default.

A primary Button inside a status toast takes the toast's tint, two steps up its color scale, the way one inside an Alert does. The variant's icon color reaches only the icon in Toast.Title, so buttons and the close control keep their own icon colors.

"use client";

import { Button } from "@smartacteam/ambient-web/button";
import { useToast } from "@smartacteam/ambient-web/toaster";

export function ToastVariants() {
  const toast = useToast();

  return (
    <div className="flex flex-wrap gap-2">
      <Button
        variant="default"
        onClick={() =>
          toast({
            title: "Default notification",
            description: "This is a default toast notification.",
          })
        }
      >
        Default
      </Button>
      <Button
        variant="default"
        onClick={() =>
          toast({
            title: "Info notification",
            description: "This is an info toast notification.",
            variant: "info",
          })
        }
      >
        Info
      </Button>
      <Button
        variant="default"
        onClick={() =>
          toast({
            title: "Success notification",
            description: "This is a success toast notification.",
            variant: "success",
          })
        }
      >
        Success
      </Button>
      <Button
        variant="default"
        onClick={() =>
          toast({
            title: "Warning notification",
            description: "This is a warning toast notification.",
            variant: "warning",
          })
        }
      >
        Warning
      </Button>
      <Button
        variant="default"
        onClick={() =>
          toast({
            title: "Error notification",
            description: "This is an error toast notification.",
            variant: "error",
          })
        }
      >
        Error
      </Button>
    </div>
  );
}