Anatomy
- Header: a concise summary, states the conflict or the main question
- Body (Optional): details and actionable context for the use
- Actions: allows the user to resolve the interruption
Usage Guidelines
When to use this component
- Unsaved changes: When a user attempts to close or abandon a flow (e.g., clicking a 'Close' button) and their progress will be lost
- Irreversible actions: Confirming destructive decisions like deleting a profile, removing a payment method, or canceling a subscription.
When not to use this component
- If you are just telling the user a task was successful (e.g., "Allergy added"), use a Toast.
- If you need to present supplementary content or actions that are related to the current context use a Bottom Sheet.
Best Practices
- Use a backdrop to block all interaction with the rest of the app and focus the user on the alert
- Don't automatically dismiss the alert.
OS Differences
We’re using native components for the Alert, so the final look is determined by the platform and specific OS version the user has. Use the Alert component provided in Figma for your designs, but be aware that the alert may look different in the live app compared to what you see in Figma.
iOS
Allows styling of the buttons: Primary, Default and Destructive.
- Primary action is always aligned to the trailing edge, for stacked version at the top
Android
- The confirming action is always aligned to the trailing edge, for stacked version at the top
Variants
1 button
A single action may be provided if it’s an acknowledgement
2 buttons
- When placing 2 buttons, by default place them next to each other.
- If you need to include longer copy, use the stacked version
3 buttons
- iOS will stack them by default
- Android allows placing 3 buttons next to each other or stacking (for button with longer copy)
Content Guidelines
- Avoid generic titles like "Warning” and long titles “Are you sure…”
- Use body if you need to give additional details about the decisions. Be explicit about the consequence.
- Always provide a clear way to go back without making a change.
- Use action-oriented verbs for the button, they should correspond with the title. Keep the button labels short, 1-2 words is optimal.
For further information, see the Content Styleguide.