Skip to main content

Alert

Alerts provide contextual feedback or error messages for typical user actions. As there are different levels of notifications, the UI should accurately use the appropriate level and method of communication as listed in the Best practices below.

Example

Alert with an information style without icons on a default theme

Best practices

Informational

  • This is the lowest level of caution.
  • Use when you want to present timely, concise information that accelerates a workflow.
  • Use to provide key information or actions that avoid a dead end in the experience.

Error

  • Use an error alert when an error occurs.
  • Use when the user workflow or expected outcome is either interrupted or stopped.
  • Use to provide guidance on dealing with the error or return to the flow.
  • Use when the notification is less severe than a Warning alert.
  • An error alert appears and dismisses within the workflow without significant disruption.

Warning

  • Use for the most severe notification (likely a rare occurrence).
  • Use when proceeding will potentially adversely impact a substantial amount of users.
  • Use when a significant change in workflow or loss of data will happen if the warning alert is ignored.
  • Use when the adverse result cannot be undone.

Do

  • Inline vs fixed to top of page - If the alert applies across a major slice/branch of the information architecture, then it should be affixed to the top of the page. Otherwise, alerts usually occur inline when specific to an action or region on the page.

Don’t

  • Try to avoid showing error and warning alerts. Use only when there is a significant amount of effort needed to resolve a potential problem, had they not been alerted.
  • Warning alerts should be a rare occurrence and should be tied to a workflow where users are interacting with the website vs just consuming the content.
  • Within the error message, it is important to clearly and concisely communicate what the problem is and focus on giving facts. Don’t blame users for the error. Proper-use example which focuses on the fact: "The credit card number entered is not valid." Improper-use example: "You entered the credit card number incorrectly".

Also known as

Informational notice
Site notice
Status alert

Related

Hyperlink

Options

  • Types: Alerts can be styled with the following:
    • f-information - for default
    • f-warning - for warning state
    • f-error - for error state
  • Headings: Optionally, add a heading element to the module's internal div element.
  • Action trigger: Optionally, add action triggers after the alert text. See the Default alert example below for additional information.
  • Warning glyph: Optionally, add markup <div class="c-glyph glyph-warning" aria-label="Warning message"></div> to include the warning glyph.
  • Information glyph: Optionally, add markup <div class="c-glyph glyph-info" aria-label="Information message"></div> to include the information glyph.
  • Error glyph: Optionally, add markup <div class="c-glyph glyph-incident-triangle" aria-label="Error message"></div> to include the error glyph.
  • Fixed Position: Optionally, to fix the position of the alert to the top of the page, add the class f-fixed to the component's div container element. For example, <div class="m-alert f-information f-fixed" role="alert"> See the Fixed alert example below for more information.

Development

  • JavaScript: Scripting documentation defines how to handle this module through JavaScript.
  • Schema definition: The alert schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Default alert

<div class="m-alert f-information" role="alert">
    <button class="c-action-trigger c-glyph glyph-cancel" aria-label="Close alert"></button>
    <div>
        <p class="c-paragraph">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <span class="c-group">
                <a class="c-action-trigger" href="#">Link to action</a>
                <a class="c-action-trigger" href="#">Link to action</a>
            </span>
        </p>
    </div>
</div>

Default alert without call to action

<div class="m-alert f-information" role="alert">
    <button class="c-action-trigger c-glyph glyph-cancel" aria-label="Close alert"></button>
    <div>
        <p class="c-paragraph">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Title on

<div class="m-alert f-information" role="alert">
    <button class="c-action-trigger c-glyph glyph-cancel" aria-label="Close alert"></button>
    <div>
        <h1 class="c-heading">Heading</h1>
        <p class="c-paragraph">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <span class="c-group">
                <a class="c-action-trigger" href="#">Link to action</a>
                <a class="c-action-trigger" href="#">Link to action</a>
            </span>
        </p>
    </div>
</div>

Icon on

<div class="m-alert f-information" role="alert">
    <button class="c-action-trigger c-glyph glyph-cancel" aria-label="Close alert"></button>
    <div>
        <div class="c-glyph glyph-info" aria-label="Information message"></div>
        <p class="c-paragraph">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <span class="c-group">
                <a class="c-action-trigger" href="#">Link to action</a>
                <a class="c-action-trigger" href="#">Link to action</a>
            </span>
        </p>
    </div>
</div>

Title and icon on

<div class="m-alert f-information" role="alert">
    <button class="c-action-trigger c-glyph glyph-cancel" aria-label="Close alert"></button>
    <div>
        <div class="c-glyph glyph-info" aria-label="Information message"></div>
        <h1 class="c-heading">Heading</h1>
        <p class="c-paragraph">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <span class="c-group">
                <a class="c-action-trigger" href="#">Link to action</a>
                <a class="c-action-trigger" href="#">Link to action</a>
            </span>
        </p>
    </div>
</div>

Error

<div class="m-alert f-error" role="alert">
    <button class="c-action-trigger c-glyph glyph-cancel" aria-label="Close alert"></button>
    <div>
        <div class="c-glyph glyph-incident-triangle" aria-label="Error message"></div>
        <p class="c-paragraph">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <span class="c-group">
                <a class="c-action-trigger" href="#">Link to action</a>
                <a class="c-action-trigger" href="#">Link to action</a>
            </span>
        </p>
    </div>
</div>

Warning

<div class="m-alert f-warning" role="alert">
    <button class="c-action-trigger c-glyph glyph-cancel" aria-label="Close alert"></button>
    <div>
        <div class="c-glyph glyph-warning" aria-label="Warning message"></div>
        <p class="c-paragraph">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <span class="c-group">
                <a class="c-action-trigger" href="#">Link to action</a>
                <a class="c-action-trigger" href="#">Link to action</a>
            </span>
        </p>
    </div>
</div>

Fixed alert

<div class="m-alert f-information f-fixed" role="alert">
    <button class="c-action-trigger c-glyph glyph-cancel" aria-label="Close alert"></button>
    <div>
        <p class="c-paragraph">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <span class="c-group">
                <a class="c-action-trigger" href="#">Link to action</a>
                <a class="c-action-trigger" href="#">Link to action</a>
            </span>
        </p>
    </div>
</div>

Preview