• Logo

    Elementra UI

    v0.1.7 - Documentation
  1. Docs
  3. Components/Toast/

Toast

A toast component that displays brief, non-intrusive notifications to the user.

Success!
This toast will appear briefly at the bottom-right corner.

1Installation

npm i elementra-ui

2Add Components Using CLI

npx elementra-ui add

Select components using the up/down arrow keys. Press spacebar to select multiple components, then press enter to add them to your src folder.

3Basic Usage

Wrap your application with the ToastProvider and use the useToast hook to create notifications.

import { ToastProvider } from "@/src/components/ui/toast";

export default function Layout({ children }) {
  return (
    <ToastProvider>
      {children}
    </ToastProvider>
  );
}
import { useToast } from "@/src/components/ui/toast";

export default function ToastExample() {
  const { addToast } = useToast();
  
  return (
    <button 
      onClick={() => {
        addToast("Your changes have been saved.", {
          title: "Success!",
          variant: "success",
        });
      }}
    >
      Save Changes
    </button>
  );
}