Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • In context
  • With status
  • With varying heights
  • Promise
  • Recommendations
  • Usage boundaries
  • API reference

Feedback

Toast

Displays temporary accessible status feedback with action triggers, viewport stacking, and anchored positioning.

idle

Usage

import { ToastPosition } from "@mizen-labs/ui";

Examples

In context

With status

Success, error, information, and warning feedback.

With varying heights

Reveal three cards, then hover or focus to expand the stack.

Promise

Loading changes into a success or error notice.

Recommendations

GuidancePractice
Do

Mount ToastProvider once at the app boundary. Add AnchoredToastProvider for anchored feedback. Examples use their shared managers.

Do

Report the outcome of an action in a short message. Offer a relevant recovery action when available.

Usage boundaries

GuidanceBoundary
Scope

Keep critical errors and required decisions on the page. Toasts are temporary feedback.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
childrenReactNode—Application elements wrapped by the toast provider.
position"bottom-right" | "bottom-center" | "bottom-left" | "top-right" | "top-center" | "top-left""bottom-right"Sets the screen corner or edge where stacked toasts appear.
portalPropsToastProviderProps["portalProps"]—Properties forwarded to the portal wrapping the toast viewport.
ToastProvider.toastManagerToastProviderProps["toastManager"]—Custom toast manager instance overriding the default singleton manager.
AnchoredToastProvider.toastManagerAnchoredToastProviderProps["toastManager"]—Custom toast manager instance overriding the default singleton manager.
timeoutnumber5000Duration in milliseconds before a toast automatically dismisses.
limitnumber3Maximum number of visible stacked toasts displayed simultaneously.
ToastProviderToastProviderProps—Context provider managing viewport rendering for stacked toast notifications.
AnchoredToastProviderAnchoredToastProviderProps—Context provider managing anchor-positioned contextual toast popups.
toastManagertypeof toastManager—Imperative manager for add, update, close, and promise operations on stacked toasts.
anchoredToastManagertypeof anchoredToastManager—Imperative manager for add, update, close, and promise operations on anchored toasts.
ToastPrimitivetypeof ToastPrimitive—Low-level Base UI toast primitive namespace for custom composition.
data.rootPropsNative toast root props—Render, refs, and events forwarded to the toast root.
data.tooltipStylebooleanfalseCompact anchored feedback with title text only.
ToastPrimitive.RootNative Base UI root—Compose a custom toast with native parts.
ToastPrimitive.useToastManagerNative toast manager hook—Access the nearest provider for custom composition.
PreviousStatus dotNextActivity Feed