Alerts help draw attention to important messages, like confirmations or warnings, that visitors should not miss while browsing the page.

Accessibility Spotlight

When changing alert colors, ensure your colors meet a sufficient contrast ratio.

Do not rely on color alone to convey meaning. Include a visual icon for those who experience colors differently.

Use an appropriate alert role for assistive technology.

Respects prefers-reduced-motion — the dismiss animation is disabled when this preference is active.

Confirm and Warn

Natura11y provides two types of alerts: Confirm in green and Warn in red.

Each alert should include an icon to help convey its meaning. Use icons from the Natura11y Icons library.

Alert Confirm

Thank you for your feedback. A confirmation message has been sent to your email. Return to our homepage.

Alert Warn

Your feedback was not sent. Complete all required fields below and submit the form again.


        <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

Line #	Details
2-5	The parent `.alert` class is required. The `.alert--{x}` class sets the alert's color, where x can be confirm or warn. The `aria-labelledby` attribute should match the alert title's `id`. The `aria-describedby` attribute should match the alert description's `id`. Include `role="alert"` for urgent information.
8-13	The `.alert__title` class is required. It contains the alert's title and icon. The `.alert__title__text` class holds the alert title text and must match the `aria-labelledby` attribute.
15-19	The `.alert__description` class is optional. It contains the alert description and should match the `aria-describedby` attribute. All links (`<a>` tags) within the `<p>` tags will automatically inherit the alert's text color.

2-5

The parent .alert class is required.

The .alert--{x} class sets the alert's color, where x can be confirm or warn.

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

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

Include role="alert" for urgent information.

8-13

The .alert__title class is required. It contains the alert's title and icon.

The .alert__title__text class holds the alert title text and must match the aria-labelledby attribute.

15-19

The .alert__description class is optional. It contains the alert description and should match the aria-describedby attribute.

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

Inverse Color Modifier

For a bolder alert look, add --inverse to the alert--confirm or alert--warn classes.

Alert Confirm

Thank you for your feedback. A confirmation message has been sent to your email. Return to our homepage.

Alert Warn

Your feedback was not sent. Complete all required fields below and submit the form again.


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

Figure 2

Title Only Alert

You can create a title-only alert by omitting the .alert__description element entirely.

Alert Confirm

Alert Warn


        <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

To make an alert dismissable, place a close button as the first child of .alert. Add data-alert-close to the button — the JavaScript uses this attribute to wire up the dismiss behavior.

Add aria-live="assertive" and aria-atomic="true" to the .alert element itself so assistive technology announces when the alert is removed.

Alert Confirm

Thank you for your feedback. A confirmation message has been sent to your email. Return to our homepage.

Alert Warn

Your feedback was not sent. Complete all required fields below and submit the form again.


        <div
            class="alert alert--confirm"
            aria-live="assertive"
            aria-atomic="true"
            role="alert"
            aria-labelledby="alert-label"
            aria-describedby="alert-description"
        >

            <button
                class="button button--icon-only"
                aria-label="Close alert"
                data-alert-close
            >
                <span class="icon icon-close" aria-hidden="true"></span>
            </button>

            <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.</p>
            </div>

        </div>

Figure 4

Line # Details

Line #	Details
3-4	Add `aria-live="assertive"` and `aria-atomic="true"` directly on the `.alert` element for dismissable alerts. This tells assistive technology to announce changes when the alert is removed.
7-11	The `data-alert-close` attribute on the button is required. The Natura11y JavaScript uses this attribute — not a class — to handle the dismiss behavior. The close button must be the first child of `.alert`, placed before `.alert__title`.

3-4

Add aria-live="assertive" and aria-atomic="true" directly on the .alert element for dismissable alerts. This tells assistive technology to announce changes when the alert is removed.

7-11

The data-alert-close attribute on the button is required. The Natura11y JavaScript uses this attribute — not a class — to handle the dismiss behavior.

The close button must be the first child of .alert, placed before .alert__title.

More Style Variations

For additional alert styles, you can exclude the .alert--confirm or .alert--warn classes. Instead, use color utilities or border utilities for different styles.

You have new mail

You have (4) unread messages waiting in your account dashboard.


        <div class="alert theme-secondary text-align-center border-radius-2">
        
            <div class="alert__title h5">
                <span class="icon icon-mail" aria-hidden="true"></span>
                <span class="alert__title__text">
                        You have new mail
                </span>
            </div>
            
            <div class="alert__description">
                <p>
                    You have <strong>(4)</strong> unread messages waiting in
                    <a href='#1'>your account dashboard</a>.
                </p>
            </div>
            
        </div>

Figure 5

Alert

Introduction

Confirm and Warn

Inverse Color Modifier

Title Only Alert

Dismissable Alerts

More Style Variations

Related CSS Variables

Read Next

Form

Accessibility