Notifications (Toasts)
Toasts are time-based notification elements that display temporary time-sensitive short messages.
Variants
Toasts
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.
Size
Toasts:
- Have an 8px padding.
- Takes up up to 87.2% of the screen width, capped at 327px.
Text Style
Toasts consists of only one text size
- Text size at 12px. Use “Label/Note” text style on Figma.
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.
Dos and Don'ts
Keep Toasts near the action button and the notification width dynamic to the text length
Write long messages. Keep it under 2 lines of text.