Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Modal

    Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.

    Overview

    Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.

    Modals are used to present critical information or request user input needed to complete a user’s workflow. Modals interrupt a user’s workflow by design. When active, a user is blocked from the on-page content and cannot return to their previous workflow until the modal task is completed or the user dismisses the modal. While effective when used correctly, modals should be used sparingly to limit disruption to the user.

    When to Use

    Require an immediate response from the user

    Use a dialog to request information that is preventing the system from continuing a user-initiated process.

    Notify the user of urgent information

    Use a modal dialog to notify the user of urgent information concerning their current work. Modal dialogs are commonly used to report system errors or convey a consequence of a user’s action.

    Confirm a user decision

    Use a modal dialog to confirm user decisions. Clearly describe the action being confirmed and explain any potential consequences that it may cause. Both the title and the button should reflect the action that will occur. If the action is destructive or irreversible then use a transactional danger modal.

     

    Formatting

    Anatomy

    Accordion anatomy diagram
    1. Container
    2. Icon (Optional)
    3. Close Icon Button - will close the dialog without submitting any data.
    4. Headline
    5. Supporting text
    6. Primary CTA: Icon optional
    7. Secondary CTA (Optional):
    8. Overlay: Screen overlay that obscures the on-page content.
     

    Behaviors

    Trigger

    Modals are triggered as a result of a user’s action and are not system generated. Common components that can trigger a modal include, button, link, or icon. On a keyboard, selecting Enteror Space should launch the modal.

    A modal can be closed by clicking on the close icon or pressing Esc

    Focus

    • When a dialog opens, focus moves to the close button inside the dialog.
    • Tab:
    • Moves focus to the next focusable element inside the dialog.
    • If focus is on the last focusable element inside the dialog, moves focus to the first focusable element inside the dialog.
    • Shift + Tab:
    • Moves focus to the previous focusable element inside the dialog.
    • If focus is on the first focusable element inside the dialog, moves focus to the last focusable element inside the dialog.
    • Escape: Closes the dialog, keyboard focus returns to the button the opened the dialog

    Focus should then remain trapped in the dialog until it is closed. When navigating by keyboard, Taband Shift-Tab do not move the focus outside of the modal.

    Related

    Modal vs Notification

    Modals are highly disruptive and block tasks until dismissed by the user. A modal should only be used as a form of notification if it provides the user with critical information immediately related to their task. For non-critical messaging, consider using a toast or inline notification instead of a modal. Toast and inline notifications provide users with non-disruptive feedback or the status of an action without breaking their workflow.