Overview
Not sure which notification to use? Here's how to pick the right one without overthinking it.
Notifications come in different types, and each one has its job. Whether you need to explain something quickly, alert users to problems, or just give a gentle nudge, choosing the right component makes all the difference. This guide cuts through the confusion and gets you to the right choice fast.
When choosing a notification, ask yourself the following:
|
Is it critical information? |
Use Dialog |
|
Is it explanatory/help text that can be hidden? |
Use Tooltip |
|
Is it workflow-related status? |
Use Callout |
|
Is it action feedback? |
Use Snackbar |
|
Is it secondary/optional information? |
Use Modal |
Examples
Tooltip
For: Explanatory information on hover/focus
Use when: Users need clarification about UI elements
Example: Explaining what an icon does
Callout
For: Contextual information within workflow
Use when: Users need status updates or workflow-related information Example: "2 items in your cart are unavailable"
Snackbar
For: Brief confirmations and non-critical updates
Use when: Providing feedback after user actions
Example: "Item added to cart" or "Changes saved"
Modal
For: Secondary, non-critical information
Use when: Offering additional options or marketing content
Example: Newsletter signup or product replacement options
Dialog
For: Critical information requiring immediate action
Use when: Users must make important decisions before continuing
Example: "Are you sure you want to delete your account?"