Toast

Copy MarkdownOpen

The toast components are powered by the Sonner library, created by Emil Kowalski — huge thanks to him for developing such an excellent tool.

Example

Installation

npm install sonner

import { Toast } from '@/components/ui/core/toast';export default function Layout({ children }: { children: React.ReactNode }) {  return (    <>      <Toast />      {children}    </>  );}

npx @libravelui@latest add toast

Another Examples

Positions

Display toast notifications in different screen locations, such as top-right or bottom-center, to fit various layout preferences and design needs.

Types

Show different toast styles for various message types — like success, error, warning, or info — helping users quickly identify the nature of the notification.

Actions

Include interactive elements, such as buttons or links, within toasts to let users respond instantly — for example, undoing an action or viewing more details.

Expand

Toast can be expanded to show more content.

<Toast expand />

Hide icon

When this toast has status like success, warning etc, the icon is shown by default. But if you want to disable the icon for a specific toast, you can do it like this.

toast.success(`Copied ${text} to clipboard`, {
  classNames: {
    toast: "[&:has([data-icon])_[data-content]]:ml-0",
    icon: "hidden",
  },
});

You can turn it off directly from the component to remove it completely. However, this approach may appear unusual when handling toast promises or loading states.

Don't Close Automatically

Sometimes, you may not want the toast to close automatically. For example, if you have a toast that waits for a user to click a button, you would not want it to close automatically when the button is clicked.

You can do it like this.

toast("Someone requested to delete this product", {
  duration: Infinity,
  cancel: {
    label: "Cancel",
    onClick: () => alert("Cancelled"),
  },
  action: {
    label: "Delete",
    onClick: () => alert("Deleted"),
  },
});