Skip Navigation

Photo by Zdeněk Macháček  on Unsplash

Alerts

Alerts help draw attention to brief confirmation or warning messages—or any other important information—that shouldn't be overlooked while your visitor scans the page.

Accessibility Spotlight

When modifying alert colors, be sure to check that your colors meet a sufficient contrast ratio.

Never rely on color alone to convey meaning. Include a visual icon in alerts for those who experience colors differently.

Include an appropriate alert role for assistive technology.

Confirm and Warn

The Natura11y provides two types of alerts: Confirm implied with green, and Warn implied with red.

Every instance of an alert should include an icon to help convey meaning. Across the Framework Natura11y Icons, our open-source icon library, is used for all icons.

<div
    class="alert alert--confirm"
    aria-labelledby="alert-label"
    aria-describedby="alert-description"
    role="alert">

    <div class="alert__title h5">
        <span class="icon icon-confirm" aria-hidden="true"></span>
        <span class="alert__title__text" id="alert-label">
            Alert Confirm
        </span>
    </div>

    <div class="alert__description" id="alert-description">
        <p>
            Thank you for your feedback. A confirmation message has been sent to your email. Return to our <a href="#1">homepage</a>.
        </p>
    </div>

</div>
Figure 1
Line #Details
2-5

The parent .alert selector is required.

The .alert--{x} is the modifier class that provides the alert's color, where x equals confirm, attention, or warn.

The aria-labelledby attribute equals the alert title's id attribute.

The aria-describedby attribute equals the alert description's id attribute.

Include role="alert" if the alert includes urgent information.

7-12

The .alert__title selector is required.

It holds the alert's title and visual icon.

The .alert__title__text selector holds the alert title's text. It is required. It includes the unique id targeted by the aria-labelledby attribute present on the .alert selector.

14-18

The .alert__description selector is not required.

It holds the alert's description message. It includes the unique id targeted by the aria-describedby attribute present on the .alert selector.

All links (<a> tags) within the <p> tags, will automatically inherit the alert's text color.

Inverse Color Modifier

For a bolder look, chain --inverse to the alert--confirm or alert--warn modifier classes respectively.

<div class="alert alert--confirm--inverse">
    ...
</div>

<div class="alert alert--warn--inverse">
    ...
</div>
Figure 2

Title Only Alert

The .alert__description is not required. Leaving it out creates a title only alert.

<div
    class="alert alert--confirm--inverse margin-y-3"
    aria-labelledby="alert-title-only-label">

    <div class="alert__title h5">
        <span class="icon icon-confirm" aria-hidden="true"></span>
        <span class="alert__title__text" id="alert-title-only-label">
            Alert Confirm
        </span>
    </div>

</div>
Figure 3

Dismissable Alerts

For dismissable alerts, add the .alert--dismissable modifier class. Doing so automatically places a close button inside the .alert.

When the close button is pressed, the alert fades out, then the entire .alert selector is removed from the DOM.

<div class="alert alert--confirm alert--dismissable">
    ...
</div>
Figure 4

More Style Variations

Looking for even more alert styles? Exclude the .alert--confirm or .alert--warn modifier classes. Instead, add the color utilities or border utilities for different accents and style variations.

<div class="alert text-color-link border-left" role="alert">

    <div class="alert__title h5">
        <span class="icon icon-warn" aria-hidden="true"></span>
        <span class="alert__title__text" id="alert-07-label">
            Alert Title
        </span>
    </div>

    <div class="alert__description" id="alert-07-desc">
        <p>
            You have <strong>4</strong> unread messages waiting in <a href="#1">your account dashboard</a>.
        </p>
    </div>

</div>

<div class="alert theme-dark border-radius text-align-center" role="alert">

    <div class="alert__title h5 text-color-secondary">
        <span class="icon icon-warn" aria-hidden="true"></span>
        <span class="alert__title__text" id="alert-06-label">
            Alert Title
        </span>
    </div>

    <div class="alert__description" id="alert-06-desc">
        <p>
            You have <strong>4</strong> unread messages waiting in <a href="#1">your account dashboard</a>.
        </p>
    </div>

</div>
Figure 5

Related CSS Variables

Further customize Alerts by redefining any of their related CSS variables as shown below.

.alert {
    --alert-padding-x: var(--spacer-2);
    --alert-padding-y: var(--spacer-2);
}