Feedback · Toast
Toast
Toast component is used to give timely feedback to user's operations. It could be the result feedback of the operation, such as success, failure, error, warning, etc.

Demos

How to import

Basic Usage

If there are scenarios in your website where multiple Toasts pop up at the same time, such as a request failure interceptor, it is recommended to use the stacking function below.

Other Types

Use different methods to show different Toast including success, warning, error and info.

Colored Background

You could use theme for a colored background style. Default is normal.

Stacking styles

You can apply stacking styles to multiple Toasts on the same screen through the stack property, and Hover expands them. （>=2.42.0）
Informational feedback

Delay

Use duration to set up time delay. By default it closes after 3 seconds.

Manual Close

Set duration to 0 if you do not want the Notification to close by itself. In this case, it could only be closed manually.

Update Toast Content

Use unique Toast id to update toast content.

Destroy all

Globally Destroy (>= 0.25.0):
  • Toast.destroyAll()

Consume Context

You could use Toast.useToast to create a contextHolder that could access context. Created toast will be inserted to where contextHolder is placed.

Create Toast with different configurations

Commonly used to override global configuration
  • ToastFactory.create(config) => Toast
    If you need Toast with different configs in your application, you can use ToastFactory.create(config)to create a new Toast (>= 1.23):
Globally Destroy (>= 0.25.0):
  • Toast.destroyAll()
Consume Context
  • Toast.useToast v>=1.2.0
    When you need access Context, you could use Toast.useToast to create a contextHolder and insert to corresponding DOM tree. Toast created by hooks will be able to access the context where contextHolder is inserted. Hook toast has following methods: info, success, warning, error, close.

API Reference

The static methods provided are as follows: Display: You can pass in options object or string directly. Methods return the value of toastId: const toastId = Toast.info({ /*...options*/ })
The global configuration is set before any method call, and takes effect only once (>= 0.25.0)
  • Toast.config(config)
** Show Toast Directly
  • Toast.info(options || string)
  • Toast.error(options || string)
  • Toast.warning(options || string)
  • Toast.success(options || string)
info error warning success return the toastId, can be used for manually closing
  • Toast.close(toastId) Close Manually

Options

Toast Options supports the following APIs as well as the APIs in Config
PropertiesInstructionstypeDefaultversion
contentToast contentstringReactNode''
iconCustom iconsReactNode0.25.0
showCloseToggle Whether show close buttonbooleantrue0.25.0
textMaxWidthMaximum width of contentnumber | string4500.25.0
onCloseCallback function when closing toast() => void
stackWhether to stack toastbooleanfalse2.42.0
idCustom ToastIdnumber

Config

The following API supports global configuration to change the default configuration of the current Toast
PropertiesInstructionstypeDefaultversion
bottomPop-up position bottomnumber | string-0.25.0
leftPop-up position leftnumber | string-0.25.0
rightPop-up position rightnumber | string-0.25.0
topPop-up position topnumber | string-0.25.0
zIndexZ-index valuenumber1010
themeStyle of background fill, one of light, normalstringnormal2.54.0
durationAutomatic close delay, no auto-close when set to 0number3
getPopupContainerSpecifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set container and inner .semi-toast-wrapper 'position: relative` This will change the DOM tree position, but not the view's rendering position.() => HTMLElement | null() => document.body0.34.0

Accessibility

ARIA

  • The role of Toast is alert

Content Guidelines

  • Keep it simple
  • Do not use periods at the end of sentences
  • Explain using the noun + verb format
✅ Recommended usage❌ Deprecated usage
Language addedNew language has been added successfully
Ticket transfer failedCan't transfer ticket
  • Provide prompt message for action
    • only provide one action
    • Don't use actions like "read" like OK, Got it, Dismiss, Cancel
✅ Recommended usage❌ Deprecated usage

Design Tokens