An alert is a modal view that appears on top of the screen.
For example, an alert could be used to ask for permission to allow notifications.
- Use an alert for important information that needs a response from the user
- To confirm a user's decision
- If the information is not critical, consider using a Notification instead
Content guidelines
- Use alerts sparingly to avoid disruption to the user
- Front-load the heading to describe the situation
- Use concise information in the body copy
- Use concise button copy (one or two words)
Availabile platforms
Platform |
Available |
---|---|
Figma |
Coming soon |
Web (@ovotech/element) |
❌ |
App (@ovotech/element-native) |
❌ |
How to use it
Implementation
For more information see the external links at the bottom of the page.
import { Alert } from 'react-native';
Alert.alert('Alert Title', 'Alert message here', [
{
text: 'Cancel button',
onPress: () => console.log('Do something as well as cancelling...'),
style: 'cancel'
},
{
text: 'Secondary button',
onPress: () => console.log('Some secondary action')
},
{
text: 'Confirm button',
onPress: () => console.log('Do something as well confirming...')
}
]);
// To display some information
window.alert("An informative message...");
// To confirm or cancel an action
window.confirm("Are you sure you want to do that?");
Related components
External links