zen
DocumentationPlayground
Getting started
IntroductionInstallationUsage Guide
ColorsFontsSpacingBordersShadowsBreakpointsThemesCustomization
BoxFlexboxGridContainer
TextHeadingCodeBlockquote
Page headerAspect ratioResizableScroll areaSeparator
Overview
AutocompleteCheckboxCheckbox groupComboboxDate pickerInput groupNumber fieldOTP FieldPassword fieldRadio groupSearch fieldSelectSliderSwitchText fieldToggleToggle group
BreadcrumbsButtonButton groupCommandContext menuHover triggerLoading buttonMenuMenubarNavbarPaginationTabsToolbarTheme buttonTheme switcher
AlertAlert dialogConfirmation dialogDialogDrawerEmptyLoadingMeterModalPopoverPreview cardProgress barProgress circleSheetSkeletonStatus lightToastTooltip
AccordionAvatarBadgeCalendarCarouselCollapsibleData cardData tableIconImageKbdListTableTag group
Feedback & Status

Toast

A succinct message that is displayed temporarily.

With title#

With action#

Variants#

Component props#

NameTypeDescription
messageReactNodeToast message content
titleReactNodeOptional toast title
variantToastVariant"default" | "success" | "error"
actionReactNodeAction element (e.g., button)
onAction() => voidCalled when action is clicked
PreviousStatus lightNextTooltip
On this page
With titleWith actionVariantsComponent props
Powered by shiso