A snackbar shows a brief, non-blocking message about a process the app has performed or will perform. It appears temporarily, toward the bottom of the screen.
Figma
The Figma reference for Snackbar will appear here once the design link is added.
Storybook
Interactive examples for Snackbar will render here once the Storybook link is wired in.
Best practices
- Use for brief confirmations that don’t require action, such as “Changes saved”.
- Show one snackbar at a time; queue additional messages rather than stacking them.
- Auto-dismiss after a short delay, but give critical messages a manual dismiss.
- Include at most one short action, such as “Undo”.
Do’s and don’ts
Do
Confirm a completed action briefly: “Lot added to watchlist — Undo”.
Don’t
Put critical information or long content that people must act on in a snackbar.
Accessibility
- Announce the message to assistive technology via a live region so it’s heard without stealing focus.
- Give people enough time to read it; don’t auto-dismiss messages with an action too quickly.