MenuCaderno UI
npmGitHub
Theme

<cad-toast> · toast()

Toast

Show a temporary notification. Call toast() for messages, actions, loading states, and promise results.

Try notifications

SuccessPromiseWith actionErrorDismiss all

Toast API

Use toast.success(), toast.info(), toast.warning(), toast.error(), or toast.neutral() for status messages.toast.loading() returns an id for toast.update(). toast.promise() follows an asynchronous result. Set actions and placement in the options, or close notifications with toast.dismiss().

React can import the same API from @caderno-ui/react/toast. No provider is required.

API reference: <cad-toast>

descriptiondescriptionstring''dismissibledismissiblebooleantruedismiss-labeldismissLabelstring'Dismiss notification'durationdurationnumber0headingheadingstring''openopenbooleantruevariantvariantCadToastVariant'info'actionCadToastAction | undefined—nodescriptionstringdescriptionnodismissiblebooleandismissibleyesdismissLabelstringdismiss-labelnodurationnumberdurationyesheadingstringheadingnoopenbooleanopenyesvariantCadToastVariantvariantyescad-toast-dismissCustomEventFired after manual, automatic, or programmatic dismissal.(default)Notification description. Falls back to the `description` attribute.actionOptional declarative action.titleNotification heading. Falls back to the `heading` attribute.actionNotification action container.baseNotification article.bodyNotification text container.close-buttonDismiss button.contentNotification description.iconStatus icon.titleNotification heading.--cad-toast-bgPer-instance toast background.--cad-toast-inkPer-instance toast foreground.--cad-toast-widthPer-instance toast width.

API reference: <cad-toast-host>

durationdurationnumber4000labellabelstring'Notifications'max-visiblemaxVisiblenumber3placementplacementCadToastPlacement'top-right'durationnumberdurationnolabelstringlabelnomaxVisiblenumbermax-visibleyesplacementCadToastPlacementplacementyes(default)Declarative `cad-toast` notifications.baseLive notification region.--cad-toast-host-z-indexNotification region stacking level.--cad-toast-host-offsetDistance from the viewport edge.--cad-toast-host-mobile-offsetDistance from the viewport edge on small screens.

Accessibility

Informational messages use polite announcements; errors use alerts. Timers pause on hover or focus. Persistent notifications stay dismissible, with named close buttons.

MIT licensed. Built with Caderno UI.Report an issue
Back to top