Toast

Optional icon; position prop sets placement (style). Click a button to show toast at that position.

How to use

Toast position types: bottom-center, bottom-left, bottom-right, top-left, top-center, top-right. Optional icon, iconPosition, iconClassName. Copy the examples below.

1. Import

tsx
import { Toast } from "@/app/components/ui";
import type { ToastPosition } from "@/app/components/ui";
import { CheckCircle2 } from "lucide-react";

2. Basic usage

tsx
<Toast
  open={open}
  onClose={() => setOpen(false)}
  title="Toast title"
  description="Optional description."
  position="bottom-right"
  icon={<CheckCircle2 className="w-5 h-5" />}
/>

3. All position types

Toast position variantstsx
// Bottom right (default)
<Toast open={open} onClose={() => setOpen(false)} title="Toast" position="bottom-right" />

// Bottom center
<Toast open={open} onClose={() => setOpen(false)} title="Toast" position="bottom-center" />

// Bottom left
<Toast open={open} onClose={() => setOpen(false)} title="Toast" position="bottom-left" />

// Top left
<Toast open={open} onClose={() => setOpen(false)} title="Toast" position="top-left" />

// Top center
<Toast open={open} onClose={() => setOpen(false)} title="Toast" position="top-center" />

// Top right
<Toast open={open} onClose={() => setOpen(false)} title="Toast" position="top-right" />

4. With icon (iconPosition, iconClassName)

tsx
<Toast
  open={open}
  onClose={() => setOpen(false)}
  title="Success"
  description="Your changes were saved."
  position="bottom-right"
  icon={<CheckCircle2 className="w-5 h-5 text-green-600 dark:text-green-400" />}
  iconPosition="start"
  iconClassName="shrink-0 pt-0.5 p-1 rounded-full bg-green-100 dark:bg-green-900/30"
/>