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
.Custom Children with Link
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
Properties | Instructions | type | Default | version |
---|---|---|---|---|
content | Toast content | string | ReactNode | '' |
duration | Automatic close delay, no auto-close when set to 0 | number | 3 | |
icon | Custom icons | ReactNode | 0.25.0 | |
showClose | Toggle Whether show close button | boolean | true | 0.25.0 |
textMaxWidth | Maximum width of content | number | string | 450 | 0.25.0 |
theme | Style of background fill, one of light , normal | string | normal | 1.0.0 |
onClose | Callback 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
Properties | Instructions | type | Default | version |
---|---|---|---|---|
bottom | Pop-up position bottom | number | string | - | 0.25.0 |
getPopupContainer | Specifies 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.body | 0.34.0 |
left | Pop-up position left | number | string | - | 0.25.0 |
right | Pop-up position right | number | string | - | 0.25.0 |
top | Pop-up position top | number | string | - | 0.25.0 |
zIndex | Z-index value | number | 1010 |
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 useToast.useToast
to create acontextHolder
and insert to corresponding DOM tree. Toast created by hooks will be able to access the context wherecontextHolder
is inserted. Hook toast has following methods:info
,success
,warning
,error
,close
.
Accessibility
ARIA
- The role of Toast is alert
Content Guidelines
Ticket transferred
- Keep it simple
- Do not use periods at the end of sentences
- Explain using the noun + verb format
✅ Recommended usage | ❌ Deprecated usage |
---|---|
Language added | New language has been added successfully |
Ticket transfer failed | Can'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 |
---|---|
Ticket transfer failed Retry | Ticket transfer failed Dismiss |