Alert

An alert interrupts the user flow to show
important and actionable information.

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


                                                                                                                                            
                                                                                                                                            
                                                                                                                                                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