Snack bar
Snack bars are small notifications that inform users. This could be about a new feature, a process that has been (or will be) executed. Without disrupting the user experience
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)
Usage
Placement
Snack bars should always appear at the bottom left of the screen, next to the sidebar. Unlike dialogs, they shouldn’t have an overlay that prevents interaction of anything else.
Place the snackbar in the bottom left next to the sidebar
Don’t place it in the middle of the screen, obstructing the rest of the UI. Don’t use an overlay either.
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) |
