Examples

Interactive examples of bong-toast in action. Click the buttons to see each toast.

Basic Usage

Simple toast with title only.

const { toast } = useBongToast();

toast({ title: "Hello world!" });

Variants

Built-in variants with color-coded icons.

toast({ title: "Saved!", variant: "success" });
toast({ title: "Error occurred", variant: "error" });
toast({ title: "Be careful", variant: "warning" });
toast({ title: "FYI", variant: "info" });

Sizes

Three built-in sizes: "sm", "md", and "lg".

toast({ title: "Small toast", size: "sm" });
toast({ title: "Medium toast", size: "md" });
toast({ title: "Large toast", size: "lg" });

Spring Configurations

Different spring physics for different vibes.

// Snappy
toast({ title: "Snappy", spring: { stiffness: 500, damping: 30, mass: 0.5 } });

// Bouncy
toast({ title: "Bouncy", spring: { stiffness: 300, damping: 12, mass: 1.0 } });

// Smooth
toast({ title: "Smooth", spring: { stiffness: 200, damping: 20, mass: 1.5 } });

Tab Layout

Asymmetric tab shape. Description expands on hover by default. Use layout: "tab".

toast({
  title: "Tab toast",
  description: "Hover to see description.",
  variant: "success",
  layout: "tab",
});

Custom Duration

Control how long toasts stay visible.

toast({ title: "Quick!", duration: 1500 });
toast({ title: "Long one", duration: 8000 });