Toast

A brief, temporary message that appears on the screen.

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add toast

Variants & Examples

Default Toast

A standard toast notification for general information.

Code for Default Toast

1import { Button } from "@/components/ui/button";
2import { useToast } from "@/hooks/use-toast";
3
4export function DefaultToast() {
5  const { toast } = useToast();
6
7  return (
8    <Button
9      onClick={() => {
10        toast({
11          title: "Scheduled: Catch up",
12          description: "Friday, February 10, 2023 at 5:57 PM",
13        });
14      }}
15    >
16      Show Toast
17    </Button>
18  );
19}

Destructive Toast

A toast notification indicating an error or destructive action.

Code for Destructive Toast

1import { Button } from "@/components/ui/button";
2import { useToast } from "@/hooks/use-toast";
3
4export function DestructiveToast() {
5  const { toast } = useToast();
6
7  return (
8    <Button
9      variant="destructive"
10      onClick={() => {
11        toast({
12          variant: "destructive",
13          title: "Uh oh! Something went wrong.",
14          description: "There was a problem with your request.",
15        });
16      }}
17    >
18      Show Destructive Toast
19    </Button>
20  );
21}

Props

These are the available props for the Toast component:

Prop	Type	Description	Default
title	string	The title of the toast.	-
description	string	The description content of the toast.	-
variant	"default" \| "destructive"	The visual style of the toast.	"default"
duration	number	How long the toast should be displayed in milliseconds.	5000