Indigo Design System v1.2.0

Modal

Modal windows take over a page to call the user’s attention to some content or to force them to take an action.

Overview

This element overlays the page with a new window (or modal) and disables the main page. Users must interact with the modal window before they can return to the main page.

These modal guidelines are designed to ensure consistency across all USAC products.

Design and Implementation

Use modal windows to do one of the following two things:

  1. Command user awareness. For example, making sure the user’s session does not time out on them.
  2. Notify users of emergency actions. For example, warning users that they are about to delete a file, or are about to exit an application without saving. The modal should ask, “Are you sure you want to proceed?”

The modal design includes the following:

  • Modal Title: A short, succinct, and clear introduction to what the user needs to know.
  • Message: A deeper explanation of what action the user needs to take.
  • Close Option: The user can close the modal by
    1. Clicking a tertiary button.
    2. Clicking the close icon in the upper right corner.
    3. Clicking outside of the modal anywhere on the page.
  • Continue Forward Option: The user can continue forward by clicking the primary button.

Modal placement:

  • Modals appear in front of a page and "take over" by covering the page in a translucent gray.
  • Modals should be placed in the 100px from the top and horizontally centered on the page to command the most attention.
close
Confirm?
Starting a new Form 460 revision will cause your current draft Form 460 to be deleted.
html
copy-2 Copy to Clipboard 
<div class="indi-modal ">
    <div class="indi-modal__content">
        <div class="indi-modal__header">
            <div class="indi-modal__close" aria-label="Close Modal">
                <svg class="indi-icon" aria-labelledby="title">
                    <title>close</title>
                    <use xlink:href="/assets/icons/indi_icons.svg#close">
                </svg>
            </div>
            <div>Confirm?
                <span class="indi-header__help-text"> </span>
                <span class="indi-header__help-icon"> </span>
            </div>
        </div>
        <div class="indi-modal__body"> Starting a new Form 460 revision will cause your current draft Form 460 to be deleted. </div>
        <div class="indi-modal__footer">
            <button class="indi-button indi-button--tertiary" type=button> Cancel </button>
            <button class="indi-button indi-button--primary" type=button> Continue </button>
        </div>
    </div>
</div>

Use Guidelines

Use When

  • Alerting users of an error.
  • Warning users of potentially harmful situations.
  • Reminding users to do something before moving on.
  • Informing users of important information.

Don’t Use When

  • The page can communicate this action. Before choosing to use the modal, ask, “Does the user need to be taken off the page for this?”
  • The action can be explained using a Notification or Alert.

Accessibility

  • Provide an aria-label="Close Modal" attribute on the indi-modal__close element of the modal component.