Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Toast for React

Provides feedback on an action.

Ark UIBase UIReact AriaRadix UI

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/toast.json

Anatomy

ToastItem
├── ToastGroup
├── ToastTitle
├── ToastDescription
├── ToastActionTrigger
└── ToastCloseTrigger

Usage

import { Button } from "@/components/ui/button";
import { createToaster, Toaster } from "@/components/ui/toast";
const toast = createToaster({
  overlap: true,
  placement: "bottom-end",
});

const ToastDemo = () => {
  const handleShowToast = () => {
    const id = toast.create({
      action: {
        label: "Undo",
        onClick() {
          toast.dismiss(id);
        },
      },
      description: "Sunday, December 3 at 9:00 AM",
      title: "Event created",
    });
  };

  return (
    <>
      <Toaster toaster={toast} />
      <Button onClick={handleShowToast} variant="outline">
        Show Toast
      </Button>
    </>
  );
};

Accessibility

KeyDescription
Enter
Activate the focused control.
Space
Activate the focused control.

Demos

Types

Set the type option to render a status icon.

Promise

Use toast.promise for loading, success, and error states.

API Reference

toast

createToaster

Toaster

PropType
AttributeType
CSS variableType
--borderstring
--popoverstring
--popover-foregroundstring
--radiusstring