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.
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
stack
Whether to stack toast
boolean
false
2.42.0
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` This will change the DOM tree position, but not the view's rendering position.
() => 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):
import React from 'react';
import { Button } from '@douyinfe/semi-ui';
function Demo() {
const ToastInCustomContainer = ToastFactory.create({
getPopupContainer: () => document.getElementById('custom-toast-container'),
});
return (
<div>
<Button onClick={() => Toast.info('Toast')}>Default Toast</Button>
<br />
<br />
<Button onClick={() => ToastInCustomContainer.info('Toast in some container')}>
Toast in custom container
</Button>
<div id="custom-toast-container">custom container</div>
</div>
);
}
render(Demo);
Globally Destroy (>= 0.25.0):
Toast.destroyAll()
HookToast
Toast.useToastv>=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
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