Snackbar
Snackbar
Snackbars provide brief, temporary messages at the bottom of the screen. They’re perfect for non-critical notifications that don’t require user action.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Width | Min 250px, max 90% viewport |
| Position | Bottom-center, 30px from edge |
| Background | #323232 (dark gray) |
| Text Color | White |
| Corner Radius | 4px |
| Padding | 16px |
| Shadow | Elevation 6dp |
Animation
Section titled “Animation”| Property | Value |
|---|---|
| Show | Fade in + slide up 100px |
| Duration | 500ms ease |
| Auto-dismiss | 4-6 seconds (configurable) |
States
Section titled “States”Opacity 0, translated down 100px
Opacity 1, translated to position
Variants
Section titled “Variants”General information message
Confirmation message, positive feedback
Warning message, caution needed
Error notification, something went wrong
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Confirm successful actions
- Display brief error messages
- Provide non-blocking feedback
- Messages that don’t require user action
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Keep messages short (1 line, max 2) | Use for critical alerts requiring action |
| Auto-dismiss after 4-6 seconds | Stack multiple snackbars |
| Use for temporary, dismissible info | Include complex information |
| Show one snackbar at a time | Block important UI elements |
Message Guidelines
Section titled “Message Guidelines”| Type | Example |
|---|---|
| Success | ”Changes saved” |
| Error | ”Failed to save” |
| Info | ”New message received” |
| Warning | ”Connection unstable” |