Notifications (Toasts)
Toasts are time-based notification elements that display temporary time-sensitive short messages.
Variants
Toasts
/Toasts%20Variants.png)
| Variant | Usage |
|---|---|
|
Toasts |
Used to display temporary, time-sensitive messages that come and go without the users’ input and they provide contextual information about on an app’s processes. |
Anatomy
Toasts are made up of the following:
- Message: Describes the notification.
- Container: Holds the message.
/Toasts%20Anatomy.png)
Size
Toasts:
- Have an 8px padding.
- Takes up up to 87.2% of the screen width, capped at 327px.
/Toasts%20(Size).png)
Text Style
Toasts consists of only one text size
- Text size at 12px. Use “Label/Note” text style on Figma.
/Toasts%20Text.png)
Behavior
Fade in. Fade out.
Timing: Each 1 character equals every 100 milliseconds (including spaces). For a short notification that varies between 15-20 character, giving 1.5 second as an average reading time is adequate.
/Toasts%20Behavior.png)
Dos and Don'ts
/Toasts%20Do.png)
Keep Toasts near the action button and the notification width dynamic to the text length
/Toasts%20Dont.png)
Write long messages. Keep it under 2 lines of text.