import { Title, Meta, Subtitle, Description, Canvas, Controls, Source, Story, } from '@storybook/addon-docs/blocks' import { LifecycleTag, SourceLinks } from '../../docs/components' import * as ToastStories from './Toast.stories' Toast A temporary message to inform users about system events. The Toast component is an ephemeral notification that appears briefly at the top of the screen. It can inform users about success messages, warnings, errors, or other important events. It also supports actions, countdown timers, and a close button.
## Usage ### Import and Place the Toaster The `Toaster` component is required to display toast notifications. It is powered by [Sonner](https://sonner.dev/), a modern toast notification library. #### **Add the Toaster to Your Layout** ```tsx import { Toaster } from '@chainlink/blocks' export default function RootLayout({ children }) { return (
{children}
{/* Ensure Toaster is rendered at the top level */} ) } ``` ### Triggering a Toast To display a toast, use the `toast` function. The example below shows how to trigger a `success` toast when a user clicks a button. ## Customization The `toast` function accepts several props to customize its content and behavior. ### All Elements ### Without Action ### Without Close Button ### Without Countdown