Feedback Toast

Toast

A message that comes and goes: booked, saved, failed. Put one <Toaster /> in the app, call toast() anywhere.

Preview

Usage

tsx

import { Toaster, useToast, ToastAction, Button } from "zostel-ui";

// once, near the root
<Toaster />

// anywhere
const { toast } = useToast();

<Button onClick={() => toast({ title: "Booked. See you in Manali.", description: "The details are in your email." })}>
  Book
</Button>

toast({
  variant: "destructive",
  title: "That didn't go through",
  action: <ToastAction altText="Try again">Try again</ToastAction>,
});

toast({ … })

Prop	Type	Default	Description
`title`	`ReactNode`	—	The message.
`description`	`ReactNode`	—	One more line.
`variant`	`"default" \| "destructive"`	`"default"`	destructive for errors.
`action`	`ToastActionElement`	—	One button (<ToastAction altText>).
`duration`	`number`	`5000`	ms before it goes.

title

Type: ReactNode

Default: —

The message.

description

Type: ReactNode

Default: —

One more line.

variant

Type: "default" | "destructive"

Default: "default"

destructive for errors.

action

Type: ToastActionElement

Default: —

One button (<ToastAction altText>).

duration

Type: number

Default: 5000

ms before it goes.

Accessibility

Toasts are announced politely by screen readers and pause while hovered or focused (Radix Toast). One at a time.