mozilla
Your Search Results

    Confirmation Redirect 2

    A confirmation prompt asks the user to take or confirm an action, such as responding to a system event such as asking the user to restart the device after swapping SIM cards, or to ask the user to grant or deny permission to perform a task. See the Coding guide for information about how to implement these prompts in your app.

    Characteristics

    • Confirmation prompts are modal; they occupy the entire screen, and require user input to close them.
    • Confirmation prompts consist of:
      • Title (optional)
      • Body
      • Icon (optional)
      • A Confirmation input button, whose label can be customized
      • An optional Cancel input button, whose label can be customized

    Visuals

    Below are some examples of what various confirmation prompts look like.

    Default appearance

    Here, an <h1> block is used to create the "Confirmation" title. Class "delete" is applied to the Delete button to display it using the delete button appearance.

    With body content

    In this example, a more complex body is used, with images and styling. Class "recommend" is used to indicate that the "Action" button is the button that will perform the action being asked about.

    Without a title

    This example is exactly like the one above, except there's no <h1> block to create a title.

    In edit mode

    Variations

    There are a few variants on the layout of confirmation prompts, as you've seen above. The simplified mockups below help clarify what the components of the prompts are, and show that you have control over the layout of the content.

    Permissions prompt

    Here, the icon and title are used to identify which app is requesting permission, and what kind of permission it's asking for.

    The body text should go into more detail as to what granting this permission would mean.

    Action confirmation prompt

    This simple action confirmation prompt is asking a simple question, and doesn't have a title.

    Action confirmation prompt

    This slightly more complex action confirmation prompt adds an icon and a title.

     

    Interaction

    Deleting messages

    In this example, a confirmation prompt is used to ask the user if they're certain that they want to delete the selected messages from a list of emails. Tapping the "Delete" button displays the prompt; deletion only occurs if the user taps the "Delete" button on the confirmation prompt.

    Confirming a permission request

    In this example, the user opens for the first time an app that needs permission to use the geolocation service. Since the app requires the permission in order to function, it immediately asks for permission to use the location service. When the user dismisses the prompt by tapping either "Don't Allow" (which denies permission to use geolocation) or "Allow" (which grants permission), the confirmation prompt is dismissed and the user's choice takes effect.

    Note that this sample includes a checkbox in the confirmation prompt to let the user's selection be saved so that the user doesn't get asked for permission again in the future.

    See also

    Document Tags and Contributors

    Contributors to this page: chrisdavidmills
    Last updated by: chrisdavidmills,