Toast
Used for lightweight feedback or prompts, without interrupting user operations.
When to use
Suitable for use when changes in page content cannot directly reflect the result of an operation
Triggered by the user's operation, the feedback information can be the result status of the operation, such as success, failure, error, warning, etc.
Principle of use
When multiple Toasts need to be displayed, only 1 can be shown at a time, and subsequent Toasts should only be displayed after the previous one has disappeared.
While displayed, the user can continue to operate the page, and it will automatically disappear after 3 to 10 seconds (the duration can be customized).
style
Divided into three types: success, failure, and loading.
Text tips
Plain text
成功提示
Success
Error tips
Don't
Loading...
Loading
size
Normal width: The background width automatically adapts to the text content, with 16px left and right padding
Maximum width: The background width does not exceed 275px; text wraps if it exceeds this limit, and the height automatically adapts
Minimum width: The minimum background width is 120px; when the text content width is less than 120px, the background width remains 120px, and the text is centered
Height: Automatically adapts to the content, with 12px top and bottom padding, centered on the page
成功提示
Icon:30px
Text:16px
16px
16px
12px
12px
Tips
Minimum width: 120px
Tips Tips Tips Tips Tips Tips Tips Tips
Tips Tips Tips Tips Tips Tips Tips Tips
Max width: 275px
Display position
Display in the middle of the page
Usage scenario
Provide corresponding feedback prompts based on the user's operations
Do not use copy descriptions that are unrelated to the operation results or process
Click the button
Pop-up feedback Toast
Recommended/Use with caution examples
Toast should not have action buttons. If you need to use a prompt component with actions, please use Snackbar.
Do
Don't
Default
Action
Error tips
Action
The maximum width of the toast is 275px. When the text is too long, it automatically wraps and cannot exceed the screen.
Do
Don't
Tips Tips Tips Tips Tips Tips Tips Tips
Tips Tips Tips Tips Tips Tips Tips Tips
Tips Tips Tips Tips Tips Tips Tips Tips
Tips Tips Tips Tips Tips Tips Tips Tips Tips Tips Tips Tips Tips Tips Tips Tips
The minimum width of the toast is 120px. When the text is very short, it is centered, and the width cannot be less than 120px.
Do
Don't
Tips
Tips
Two Toasts cannot appear at the same time; the next one should be shown only after the previous toast disappears.
Do
Don't
Error tips Error tips
Loading...
Error tips
To Designer
Component usage
Select the outer layer of the component to switch the type of Toast (success, failure, loading).
Light reminder, message, bubble, tip, message |