Component reference
Toast
Brief, dismissible notifications backed by a shared store.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { Button, toast, Toaster } from "@pimolu/react";
export function ToastExample() {
return (
<div>
<Button
onClick={() => toast({
title: "Your draft is ready.",
description: "A local demonstration of a success notification.",
variant: "success",
duration: 5000
})}
>
Show notification
</Button>
<Toaster position="bottom-right" label="Documentation notifications" />
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Persistent warning
Open a real notification, dismiss it or wait for its configured duration.
Brief status update
Open a real notification, dismiss it or wait for its configured duration.
Undo a local action
Archive a draft and restore it through the toast action.
Usage
Mount one Toaster in your app and call toast with a title and optional description, tone, duration and action. toast returns an id that dismissToast can remove.
A duration of 0 keeps the toast open. Dismissal and actions should be meaningful, and an important workflow should not depend on noticing a transient notification.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluToastAction
Type source| Name | Type | Default | Description |
|---|---|---|---|
labelRequired | ReactNode | "Notifications" | Visible label associated with the control. |
onClickRequired | () => void | — | Public Pimolu prop; see the source declaration for details. |
labelRequiredReactNodeDefault: "Notifications"
Visible label associated with the control.
onClickRequired() => voidNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluToastOptions
Type source| Name | Type | Default | Description |
|---|---|---|---|
titleRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
description | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
variant | "success" | "warning" | "danger" | "default" | undefined | "default" | Variant exposed by this component. |
duration | number | undefined | 5000 | Auto-dismiss delay in ms. 0 keeps the toast open. Defaults to 5000. |
action | PimoluToastAction | undefined | — | Public Pimolu prop; see the source declaration for details. |
id | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
titleRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
descriptionReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
variant"success" | "warning" | "danger" | "default" | undefinedDefault: "default"
Variant exposed by this component.
durationnumber | undefinedDefault: 5000
Auto-dismiss delay in ms. 0 keeps the toast open. Defaults to 5000.
actionPimoluToastAction | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
idstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluToastItem
Type source| Name | Type | Default | Description |
|---|---|---|---|
idRequired | string | — | Public Pimolu prop; see the source declaration for details. |
titleRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
description | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
variant | "success" | "warning" | "danger" | "default" | undefined | "default" | Variant exposed by this component. |
duration | number | undefined | 5000 | Auto-dismiss delay in ms. 0 keeps the toast open. Defaults to 5000. |
action | PimoluToastAction | undefined | — | Public Pimolu prop; see the source declaration for details. |
idRequiredstringNo default extracted.
Public Pimolu prop; see the source declaration for details.
titleRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
descriptionReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
variant"success" | "warning" | "danger" | "default" | undefinedDefault: "default"
Variant exposed by this component.
durationnumber | undefinedDefault: 5000
Auto-dismiss delay in ms. 0 keeps the toast open. Defaults to 5000.
actionPimoluToastAction | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluToasterProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
position | PimoluToastPosition | undefined | "top-right" | Public Pimolu prop; see the source declaration for details. |
label | string | undefined | "Notifications" | Accessible name of the live region. |
positionPimoluToastPosition | undefinedDefault: "top-right"
Public Pimolu prop; see the source declaration for details.
labelstring | undefinedDefault: "Notifications"
Accessible name of the live region.
Accessibility
- Toaster provides a named live region; avoid mounting several for the same store.
- Keep a persistent way to find important feedback. Allow enough time to read the message and operate any action.