
Top bar
A top bar shows a prominent message and related actions.
External resources
Fully implemented in LOGEX Framework
Frequency
There should only one snack bar on the screen at the same time.
Anatomy

- Title
- Short and clear body text
- Close button
- Condensed buttons
(optional)
When to use which notification
Component | Priority | User action |
---|---|---|
Snack bar | Low priority | Optional: Snack bars remain until dismissed by the user, or if the state that caused the banner is resolved. |
Top bar | Medium priority | Optional: Banners remain until dismissed by the user, or if the state that caused the banner is resolved. |
Dialog | Highest priority | Required: Dialogs block app usage until the user takes a dialog action or exits the dialog (if available) |