Snackbar
A Snackbar is a message control compatible with prompts and actions.
When to use
This component is similar to Toast, both are usually used for low-interference message notifications that can be ignored and do not interrupt the user's current actions. However, compared to Toast, Snackbar has the advantage of better readability and can also be interactive, making it more widely applicable.
Principle of use
When multiple Snackbars need to be displayed, only one can be shown at a time, and subsequent Snackbars should be displayed only after the previous one has disappeared
The display does not interrupt user operations, and it will disappear in the following cases:
Disappears immediately when the page changes
If the user does not perform any operation, it will automatically disappear after 3 to 10 seconds (the duration can be customized)
When the user clicks the action button on the Snackbar, it disappears at the same time the action is triggered
style
Basic styles for a snackbar with action points and a close option.
Default
Action
With operation buttons
Default
With a close button
size
size
Default
Action
343px
14 pixels
14 pixels
16px
48px
Line break rules
When the copy is too long, wrap it. Maintain a fixed spacing from the bottom during line breaks, adaptive upwards.
The copy can display up to 2 lines; multilingual content requires review.
Default Default Default Default Default Default Default Default Default Default
Action
Line break with operation button
Default Default Default Default Default Default Default Default Default Default
Line break with a close button
Display position
The snackbar appears at the bottom of the page and cannot obscure the primary button at the bottom.
Usage scenario
Provide corresponding feedback prompts based on the user's actions; this can be text-only or include corresponding action buttons.
Do not use copy descriptions that are unrelated to the action results or process.
Favorites
Spot
ETF
Futures
Margin
Search Coin Pairs
Spot
Futures
You have not added any coins
Start adding to Favorites
Add Tokens Chosen Above
+12.00%
+12.00%
+12.00%
+12.00%
-12.00%
934.32
934.32
934.32
934.32
934.32
MX
BTC3L
BTC3L
BTC3L
BTC3L
/USDT
/ETF
/ETF
/ETF
/ETF
Add To Favorites
Markets
Trade
Futures
Wallets
Home
9:41
Favorites
Spot
ETF
Futures
Margin
+1212.00%
0.000051
£3,281.98
Safemoon
/USDT
Vol
74,563,456.88
-12.00%
9,3134.32
£3,921
BTC
/USDT
Vol
74,563,456.88
+12.00%
0.04821
£0.81
RACA
/USDT
Vol
74,563,456.88
+12.00%
3,934.32
£3,921
BTC
/USDT
Vol
74,563,456.88
+12.00%
2,934.32
£3,921
ETH
/USDT
Vol
74,563,456.88
+12.00%
1,934.32
£3,921
SHIB
/USDT
Vol
74,563,456.88
Name
/ Vol
Change
Last Price
Spot
Futures
3X
Add To Favorites
Markets
Trade
Futures
Wallets
Home
Added to Favorites
Edit Group
9:41
Click the add button
Pop up the corresponding Snackbar prompt
Recommended/Use with caution examples
Do not use button styles other than the text button, as the snackbar is not intended for carrying important actions.
Do
Don't
Default
Action
Default
Action
Do not use 2 or more buttons; if indeed needed, please consider using a Modal
Do not use to carry very important operations; if indeed needed, please consider using a Modal
Do
Insufficient balance
Insufficient balance to place an order. Please transfer assets from another wallet or recharge to place an order.
Transfer
Recharge
Insufficient balance to place an order. Please transfer assets from another wallet or recharge to place an order.
Transfer
Recharge
Don't
The snackbar must not obscure the bottom buttons or bottom navigation.
Do
Don't
Btn
Default
Btn
Default
Two snackbars cannot appear at the same time; the next snackbar should be displayed after the previous one disappears.
Do
Don't
Default
Default Default Default Default Default Default Default Default Default Default
Default
To Designer
Component usage
Select the outer layer of the component, you can switch states, whether to include a close icon or action button.
Bottom tip, message bar, notification bar |