Toast — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to React Aria.

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download toast -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { toast, Toaster } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";
type ToastVariant = "neutral" | "destructive" | "info" | "warning" | "success";
const method = {
  neutral: toast,
  success: toast.success,
  destructive: toast.error,
  warning: toast.warning,
  info: toast.info,
};
function ToasterDemo({
  title,
  description,
  action,
  cancel,
  variant,
}: {
  title?: string;
  description?: string;
  action?: boolean;
  cancel?: boolean;
  variant?: ToastVariant;
}) {
  const fire = () =>
    method[variant ?? "neutral"](title, {
      description: description,
      ...(action
        ? { action: { label: "Action", onClick: () => console.log("Action") } }
        : {}),
      ...(cancel
        ? { cancel: { label: "Undo", onClick: () => console.log("Undo") } }
        : {}),
    });
  return (
    <div className="w-full h-full">
      <Button variant="tertiary" onClick={fire}>
        Show Toast
      </Button>

      <Toaster />
    </div>
  );
}
<ToasterDemo variant="neutral" title="Saved" description="Your changes were saved." action={false} cancel={false} />;

Examples

Default

import { toast, Toaster } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";
type ToastVariant = "neutral" | "destructive" | "info" | "warning" | "success";
const method = {
  neutral: toast,
  success: toast.success,
  destructive: toast.error,
  warning: toast.warning,
  info: toast.info,
};
function ToasterDemo({
  title,
  description,
  action,
  cancel,
  variant,
}: {
  title?: string;
  description?: string;
  action?: boolean;
  cancel?: boolean;
  variant?: ToastVariant;
}) {
  const fire = () =>
    method[variant ?? "neutral"](title, {
      description: description,
      ...(action
        ? { action: { label: "Action", onClick: () => console.log("Action") } }
        : {}),
      ...(cancel
        ? { cancel: { label: "Undo", onClick: () => console.log("Undo") } }
        : {}),
    });
  return (
    <div className="w-full h-full">
      <Button variant="tertiary" onClick={fire}>
        Show Toast
      </Button>

      <Toaster />
    </div>
  );
}
<ToasterDemo variant="neutral" title="Title" description="Description" action cancel />;

With Title Description

import { toast, Toaster } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";
type ToastVariant = "neutral" | "destructive" | "info" | "warning" | "success";
const method = {
  neutral: toast,
  success: toast.success,
  destructive: toast.error,
  warning: toast.warning,
  info: toast.info,
};
function ToasterDemo({
  title,
  description,
  action,
  cancel,
  variant,
}: {
  title?: string;
  description?: string;
  action?: boolean;
  cancel?: boolean;
  variant?: ToastVariant;
}) {
  const fire = () =>
    method[variant ?? "neutral"](title, {
      description: description,
      ...(action
        ? { action: { label: "Action", onClick: () => console.log("Action") } }
        : {}),
      ...(cancel
        ? { cancel: { label: "Undo", onClick: () => console.log("Undo") } }
        : {}),
    });
  return (
    <div className="w-full h-full">
      <Button variant="tertiary" onClick={fire}>
        Show Toast
      </Button>

      <Toaster />
    </div>
  );
}
<ToasterDemo variant="neutral" title="Event created" description="Friday, February 10, 2023 at 5:57 PM" action={false} cancel={false} />;

With Action

import { toast, Toaster } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";
type ToastVariant = "neutral" | "destructive" | "info" | "warning" | "success";
const method = {
  neutral: toast,
  success: toast.success,
  destructive: toast.error,
  warning: toast.warning,
  info: toast.info,
};
function ToasterDemo({
  title,
  description,
  action,
  cancel,
  variant,
}: {
  title?: string;
  description?: string;
  action?: boolean;
  cancel?: boolean;
  variant?: ToastVariant;
}) {
  const fire = () =>
    method[variant ?? "neutral"](title, {
      description: description,
      ...(action
        ? { action: { label: "Action", onClick: () => console.log("Action") } }
        : {}),
      ...(cancel
        ? { cancel: { label: "Undo", onClick: () => console.log("Undo") } }
        : {}),
    });
  return (
    <div className="w-full h-full">
      <Button variant="tertiary" onClick={fire}>
        Show Toast
      </Button>

      <Toaster />
    </div>
  );
}
<ToasterDemo variant="neutral" title="Title" description="Description" action cancel />;

Destructive

import { toast, Toaster } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";
type ToastVariant = "neutral" | "destructive" | "info" | "warning" | "success";
const method = {
  neutral: toast,
  success: toast.success,
  destructive: toast.error,
  warning: toast.warning,
  info: toast.info,
};
function ToasterDemo({
  title,
  description,
  action,
  cancel,
  variant,
}: {
  title?: string;
  description?: string;
  action?: boolean;
  cancel?: boolean;
  variant?: ToastVariant;
}) {
  const fire = () =>
    method[variant ?? "neutral"](title, {
      description: description,
      ...(action
        ? { action: { label: "Action", onClick: () => console.log("Action") } }
        : {}),
      ...(cancel
        ? { cancel: { label: "Undo", onClick: () => console.log("Undo") } }
        : {}),
    });
  return (
    <div className="w-full h-full">
      <Button variant="tertiary" onClick={fire}>
        Show Toast
      </Button>

      <Toaster />
    </div>
  );
}
<ToasterDemo variant="destructive" title="Something went wrong" description="Please try again." action cancel={false} />;

Success

import { toast, Toaster } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";
type ToastVariant = "neutral" | "destructive" | "info" | "warning" | "success";
const method = {
  neutral: toast,
  success: toast.success,
  destructive: toast.error,
  warning: toast.warning,
  info: toast.info,
};
function ToasterDemo({
  title,
  description,
  action,
  cancel,
  variant,
}: {
  title?: string;
  description?: string;
  action?: boolean;
  cancel?: boolean;
  variant?: ToastVariant;
}) {
  const fire = () =>
    method[variant ?? "neutral"](title, {
      description: description,
      ...(action
        ? { action: { label: "Action", onClick: () => console.log("Action") } }
        : {}),
      ...(cancel
        ? { cancel: { label: "Undo", onClick: () => console.log("Undo") } }
        : {}),
    });
  return (
    <div className="w-full h-full">
      <Button variant="tertiary" onClick={fire}>
        Show Toast
      </Button>

      <Toaster />
    </div>
  );
}
<ToasterDemo variant="success" title="Saved" description="Your changes were saved." action={false} cancel={false} />;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Prop	Type	Default	Description
`variant`	`"neutral" \| "destructive" \| "warning" \| "success" \| "info" \| null`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.