FeedbackInteractive playground
Toaster
Brief notifications that accompany an action.
Preparing the playground…
Text and Markdown example
Toaster · Example
1<><Toaster /><Button onClick={() => toast.success("Project saved")}>Show notification</Button></>How to use it
Mount one Toaster in your application and call toast from event handlers. Do not use toasts as the only place for errors that require correction.
Import
React / Next.js
1import { Toaster } from "@kivora/nextjs";Interactive examples run inside a component with "use client". The playground's Copy button includes the imports needed for the current example.
API reference 0.2.0
Types from the installed published version, including component properties and common HTML attributes. “Optional” does not imply a default value; omitting a property lets the component decide.
| Property | Type | Description |
|---|---|---|
className | string | Additional CSS classes to customize the element. |
closeButton | boolean | Configures closeButton. The type describes the supported values and structure. |
containerAriaLabel | string | Configures containerAriaLabel. The type describes the supported values and structure. |
customAriaLabel | string | Configures customAriaLabel. The type describes the supported values and structure. |
dir | "auto" | "ltr" | "rtl" | Interface reading direction. |
duration | number | Configures duration. The type describes the supported values and structure. |
expand | boolean | Configures expand. The type describes the supported values and structure. |
gap | number | Configures gap. The type describes the supported values and structure. |
hotkey | string[] | Configures hotkey. The type describes the supported values and structure. |
icons | ToastIcons | Configures icons. The type describes the supported values and structure. |
id | string | Element identifier; associates labels and descriptions. |
invert | boolean | Configures invert. The type describes the supported values and structure. |
mobileOffset | Offset | Configures mobileOffset. The type describes the supported values and structure. |
offset | Offset | Configures offset. The type describes the supported values and structure. |
position | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center" | Configures position. The type describes the supported values and structure. |
richColors | boolean | Configures richColors. The type describes the supported values and structure. |
style | CSSProperties | React inline styles. |
swipeDirections | SwipeDirection[] | Configures swipeDirections. The type describes the supported values and structure. |
theme | "light" | "dark" | "system" | Component theme or theme identifier, depending on the API. |
toastOptions | ToastOptions | Configures toastOptions. The type describes the supported values and structure. |
visibleToasts | number | Configures visibleToasts. The type describes the supported values and structure. |
TypeScript definition
Review each component's properties and published declaration. Native and accessibility attributes are inherited from the element specified by its type.
Toaster21 properties
Toaster · TypeScript
1declare function Toaster({ className, toastOptions, ...props }: ToasterProps): React.JSX.Element;API generated from @kivora/nextjs 0.2.0View package