Toast Notification Mobile
Toast Notification Mobile
Toast notifications are brief messages that appear temporarily to provide feedback about operations or status changes. Android has established toast and snackbar patterns through Material Design. iOS lacks a system-provided toast component, leading to varied custom implementations. Design systems must specify toast patterns that work appropriately on each platform.
What Are Mobile Toast Notifications
Toast notifications display brief, non-blocking messages that automatically disappear after a timeout. They confirm actions (“Message sent”), report status (“Connection restored”), or provide information (“New items available”) without requiring user interaction.
Android provides Toast (system-level) and Snackbar (Material Design) components. Snackbars appear at screen bottom, support actions (like Undo), and follow Material Design specifications. Toast displays centered messages without actions.
iOS has no native toast component. Applications implement custom toasts with varied positioning, styling, and behavior. Some implementations follow Android conventions; others take different approaches.
How Toast Notifications Work
Android Snackbar provides the most specified toast-like component. Snackbars appear at screen bottom, contain a message and optional action, and dismiss automatically after a timeout or on user interaction.
Toast Notification Patterns:
Android Snackbar:
- Position: Bottom, above FAB if present
- Duration: SHORT (4s), LONG (10s), INDEFINITE
- Content: Message text + optional action
- Dismissal: Timeout, swipe, action tap
- Stacking: New replaces old
Android Toast:
- Position: Center-bottom (historically)
- Duration: SHORT, LONG only
- Content: Text only, no action
- Dismissal: Timeout only
- Limited in Android 12+
iOS Custom Implementations:
- Position: Varies (top, bottom, center)
- Duration: Custom timing
- Content: Custom (text, icons, actions)
- Dismissal: Various approaches
- No system standard
Design System Considerations:
- Consistent position across platforms
- Duration standardization
- Action support requirements
- Queue management for multiple toasts
- Accessibility announcement
Position conventions vary but bottom positioning is common for mobile. Bottom placement avoids obscuring navigation and key content. Top positioning works when keyboard visibility is common or bottom content is critical.
Duration standards typically range from 4-10 seconds. Shorter durations suit quick confirmations. Longer durations suit messages requiring reading time. Indefinite durations suit messages requiring action.
Action support enables undo and other follow-up actions. Snackbars commonly support single actions. The action dismisses the snackbar after tap.
Key Considerations
- Position consistency across the application
- Duration appropriate for message content
- Action support for undo and follow-up
- Queue management for rapid successive toasts
- Accessibility announcement for screen readers
- Safe area handling on notched devices
Common Questions
What position should design systems specify for toasts?
Bottom positioning follows Android convention and works well for most applications. Toasts appear in consistent location, do not obscure navigation, and feel like unobtrusive feedback.
Top positioning works when bottom navigation or content is critical. Applications with persistent bottom bars or frequent keyboard use may prefer top toasts.
Consistency within application matters most. All toasts should appear in the same position. Mixed positioning confuses users about where to look for feedback.
Platform variation is acceptable if deliberate. Android bottom, iOS top could follow platform conventions if desired, though consistent positioning across platforms is also reasonable.
How should design systems handle toast accessibility?
Screen reader announcement is essential. Toast content must be announced to VoiceOver and TalkBack users who cannot see visual toasts.
Sufficient duration allows reading and comprehension. Messages should remain visible long enough for all users to read, including those reading slowly.
Action accessibility requires clear labeling. If toasts have actions, those actions must be accessible to assistive technology users.
Avoid critical information in toasts alone. Important information should not rely solely on transient toasts that users might miss.
How do multiple toasts queue?
Replace strategy shows only the newest toast. When a new toast appears, it replaces any existing toast. Simple but may lose important messages.
Queue strategy shows toasts sequentially. New toasts wait until current toast dismisses. Ensures all messages display but may overwhelm with many.
Priority strategy allows important toasts to interrupt. Error messages might replace success confirmations, but success confirmations queue normally.
Design systems should specify queue behavior to ensure consistent implementation.
Summary
Toast notifications provide transient feedback without blocking user interaction. Android Snackbar establishes clear patterns; iOS requires custom implementation. Design systems should specify position, duration, action support, and queue behavior to ensure consistent toast experiences. Accessibility through screen reader announcement is essential for inclusive toast implementation.
Buoy scans your codebase for design system inconsistencies before they ship
Detect Design Drift Free