CommunicationMaterial Design 3
Snackbar
Snackbars provide brief notifications about app processes at the bottom of the screen. They appear temporarily and disappear automatically without requiring user interaction.
Overview
Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They should not interrupt the user experience, and they do not require user input to disappear. Snackbars can contain a single action that is optional and does not block the disappearance of the snackbar.
Live Preview
Item added to cart
Snackbar Variants
Single-line
Single-line snackbar message
Single-line with action
Message sent
Two-line
Unable to send photoRetry in 5 seconds
With close button
Notification settings updated
With leading icon
File uploaded successfully
Brand Properties
The following table shows all CRAFT Snackbar properties with their default values and brand-specific mappings.
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| Background Color | Color picker | #313033 | #1f2937 | #1f2937 |
| Text Color | Color picker | #F5F5F5 | #FFFFFF | #FFFFFF |
| Action Color | Color picker | #BB86FC | #8B9F4A | #5F982F |
| Border Radius | Input (px) | 4px | 8px | 8px |
| Font Size | Dropdown | 14px | 14px | 14px |
| Font Weight | Dropdown | 400 | 400 | 400 |
| Action Font Weight | Dropdown | 500 | 600 | 600 |
| Padding Vertical | Input (px) | 14px | 12px | 12px |
| Padding Horizontal | Input (px) | 16px | 16px | 16px |
| Duration | Input (ms) | 4000ms | 4000ms | 4000ms |
| Min Width | Input (px) | 288px | 280px | 280px |
| Max Width | Input (px) | 568px | 480px | 480px |
| Position | Dropdown | bottom-center | bottom-center | bottom-center |
| Margin Bottom | Input (px) | 24px | 16px | 16px |
| Shadow | Dropdown | elevation-3 | md | md |
Positioning
Top Left
Top Center
Top Right
Bottom Left
Bottom Center (Default)
Bottom Right
Accessibility
- Use
role="alert"orrole="status"for screen reader announcements - Action buttons must be keyboard accessible
- Provide enough display time for users to read the message (minimum 4 seconds)
- Do not use snackbars for critical information that requires acknowledgment
- Ensure action text has sufficient contrast against the background
- Consider users who may need more time to read and interact
Best Practices
Do
- Keep messages brief and clear
- Show only one snackbar at a time
- Use for low-priority, non-blocking feedback
- Provide an action when users can undo
Don't
- Stack multiple snackbars
- Use for critical errors that need acknowledgment
- Include required actions users must take
- Make snackbars persistent without user control
Related Components
- Communication Overview
- Tooltips - For hover information
- Badges - For status indicators