Toast

A non-intrusive notification message that appears temporarily to provide feedback about an action, with support for multiple variants and auto-dismiss.

Preview

Usage

tsx
import { useToast } from "zostel-ui";

function BookingButton() {
  const { toast } = useToast();

  return (
    <Button
      onClick={() => {
        toast({
          title: "Booking Confirmed",
          description: "Your stay has been confirmed.",
          variant: "default",
        });
      }}
    >
      Book Now
    </Button>
  );
}

// Variants: "default" | "success" | "destructive"

Props

title
Type: string
Default: —

The title text of the toast notification

description
Type: string
Default: —

The description text below the title

variant
Type: "default" | "success" | "destructive"
Default: "default"

The visual style variant of the toast

duration
Type: number
Default: 4000

Duration in milliseconds before the toast auto-dismisses

action
Type: ReactNode
Default: —

An optional action button rendered inside the toast
Previous Tooltip Next Command