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)
Close Manually ( toastId is the return value of the display methods)
  • Toast.close(toastId)
PropertiesInstructionstypeDefaultversion
bottomPop-up position bottomnumber | string-0.25.0
contentToast contentstringReactNode''
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`() => HTMLElement | null() => document.body0.34.0
iconCustom iconsReactNode0.25.0
leftPop-up position leftnumber | string-0.25.0
rightPop-up position rightnumber | string-0.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
topPop-up position topnumber | string-0.25.0
zIndexZ-index valuenumber1010
onCloseCallback function when closing toast() => void
The global configuration is set before any method call, and takes effect only once (>= 0.25.0):
  • Toast.config(config)
PropertiesInstructionstypeDefaultversion
bottomBottom, absolute positionnumber | string-0.25.0
durationAutomatic close delay, no auto-close when set to 0number(second)30.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.body1.23.0
leftLeft, absolute positionnumber | string-0.25.0
rightRight, absolute positionnumber | string-0.25.0
topTop, absolute positionnumber | string-0.25.0
zIndexZ-indexnumber10100.25.0
  • 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

React Component LibraryFigma UIKit

Theme & DSM

GitHub

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED