Snackbar

communication

Snackbars provide brief messages about app processes at the bottom of the screen. They automatically disappear after a timeout.

Variants

Single Line

Default

Snackbar with single line message

Two Line

Snackbar with wrapped message text

With Action

Snackbar with action button

Properties

Name Type Required Default Description
open boolean - - Whether the snackbar is visible
message string Yes - The message text to display
action string - - Text for the action button
closeOnAction boolean - true Close snackbar when action is clicked
timeout number - 5000 Duration in ms before auto-dismiss (0 = no auto-dismiss)
stacked boolean - - Stack action below message for longer text

States

hidden

Snackbar is not visible

entering

Snackbar is animating in

visible

Snackbar is displayed

exiting

Snackbar is animating out

Accessibility

Role: status
Keyboard Support:
  • Tab - Focus action button if present
  • Enter/Space - Activate action button
  • Escape - Dismiss snackbar
Screen Reader Notes: Use role="status" and aria-live="polite" for non-critical messages. Use aria-live="assertive" only for critical messages.

LLM Context

Intent: Provide brief, non-blocking feedback about operations
Anti-Patterns:
  • Multiple snackbars at once
  • Critical errors in snackbar
  • Very long messages
  • Required actions in snackbar
  • Snackbar without timeout (except for error recovery)
Example Usage: 
<md-snackbar message="Message sent" open></md-snackbar>
<md-snackbar message="Item deleted" action="Undo"></md-snackbar>
<md-snackbar message="Connection restored. Your data has been synced." stacked action="OK"></md-snackbar>