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

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.
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.

useToast Hooks

You could use Toast.useToast to create a contextHolder that could access context. Created toast will be inserted to where contextHolder is placed.
You could also use ReactDOM.createPortal to insert toast in a Portal.

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*/ })
  • Toast.info(options || string)
  • Toast.error(options || string)
  • Toast.warning(options || string)
  • Toast.success(options || string)
  • Toast.close(toastId) Close Manually ( toastId is the return value of the display methods)
  • Toast.config(config) The global configuration is set before any method call, and takes effect only once (>= 0.25.0)
The following APIs can take effect without calling additional ToastFactory.create(config) to create a new Toast
PropertiesInstructionstypeDefaultversion
contentToast contentstringReactNode''
durationAutomatic close delay, no auto-close when set to 0number3
iconCustom iconsReactNode0.25.0
showCloseToggle Whether show close buttonbooleantrue0.25.0
textMaxWidthMaximum width of contentnumber | string4500.25.0
themeStyle of background fill, one of light, normalstringnormal1.0.0
onCloseCallback function when closing toast() => void
If not specifically declared in Toast.config(config), the following APIs need to call additional ToastFactory.create(config) to create new Toast settings
PropertiesInstructionstypeDefaultversion
bottomPop-up position bottomnumber | string-0.25.0
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`() => HTMLElement | null() => document.body0.34.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
  • 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()
HookToast
  • 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.

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