Toast

A short message that displays temporarily, typically as notification or feedback.

sonner.emilkowal.ski

Toast

Default

<Button onClick={() => toast("This is a toast notification")}>
  Show Toast
</Button>

With Description

<Button onClick={() => toast("File uploaded", {
  description: "Your file has been successfully uploaded to the server.",
})}>
  With Description
</Button>

Variants

Success

<Button
  variant="success"
  onClick={() => toast.success("Operation successful!")}
>
  Success
</Button>

Error

<Button
  variant="danger"
  onClick={() => toast.error("An error occurred!")}
>
  Error
</Button>

Warning

<Button
  variant="outline"
  onClick={() => toast.warning("Please proceed with caution.")}
>
  Warning
</Button>

Info

<Button
  onClick={() => toast.info("For your information.")}
>
  Info
</Button>

Advanced Features

With Action

<Button
  onClick={() => toast("Message sent", {
    action: {
      label: "Undo",
      onClick: () => toast.info("Action undone"),
    },
  })}
>
  With Action
</Button>

With Cancel

<Button
  onClick={() => toast("Message sent", {
    cancel: {
      label: "Cancel",
      onClick: () => toast.info("Action undone"),
    },
  })}
>
  With Cancel
</Button>

Custom Duration

<Button
  onClick={() => toast("This will stay for 10 seconds", {
    duration: 10000,
  })}
>
  10s Duration
</Button>

Promise Toast

<Button
  onClick={() => {
    const promise = new Promise((resolve) => {
      setTimeout(() => resolve({ name: "data.txt" }), 2000);
    });

    toast.promise(promise, {
      loading: "Uploading file...",
      success: (data) =>
        `${(data as { name: string }).name} uploaded successfully`,
      error: "Failed to upload",
    });
  }}
>
  Promise Toast
</Button>