Sections

Notices

Notices deliver System and Engagement messaging, informing the user about product or account statuses and related actions.

Accessibility

Section titled Accessibility

Item	Applied to	Description
`aria-labelledby="[id]"`	`.s-toast`	Used to reference the alert message within the dialog. If you are using `.s-toast`, this must be applied. (Source)
`aria-hidden="[state]"`	`.s-toast`	Informs assistive technologies (such as screen readers) if they should ignore the element. When applied to `.s-toast`, Stacks will use this attribute to show or hide the toast. (Source)
`aria-label="[text]"`	`.s-btn`	Labels the element for assistive technologies (such as screen readers). This should be used on any button that does not contain text content. (Source)
`role="alert"`	`.s-notice`	A form of live region which contains important, usually time-sensitive, information. Elements with an alert role have an implicit `aria-live` value of `assertive` and implicit `aria-atomic` value of `true`. (Source)
`role="alertdialog"`	`.s-toast`	The wrapping content area of an `alert`. Elements with the `alertdialog` role must use the `aria-describedby` attribute to reference the alert message within the dialog. (Source)
`role="status"`	`.s-notice`	A form of live region which contains advisory information but isn't important enough to justify an alert role. Elements with a status role have an implicit `aria-live` value of `polite` and implicit `aria-atomic` value of `true`. If the element controlling the status appears in a different area of the page, you must make the relationship explicit with the `aria-controls` attribute. (Source)

Visual styles

Section titled Visual styles

Classes

Section titled Classes

Class	Applied to	Description
`.s-notice`	N/A	Default style used to separate notices from the main content.
`.s-notice--btn`	N/A	Child element applied to .s-btn within a toast to give it a subtle tint that’s appropriate in that context.
`.s-notice__info`	`.s-notice`	Visual style for information notices.
`.s-notice__success`	`.s-notice`	Visual style for success notices.
`.s-notice__warning`	`.s-notice`	Visual style for warning notices.
`.s-notice__danger`	`.s-notice`	Visual style for danger notices.
`.s-notice__important`	`.s-notice`	Emboldens the above visual styles by strengthening the background saturation. This should be used for time-sensitive, pressing information that needs to be noticed by the user.

Filled

Section titled Filled

Default style used to separate notices from the main content

<div class="s-notice" role="status">…</div>
<div class="s-notice s-notice__info" role="status">…</div>
<div class="s-notice s-notice__success" role="status">…</div>
<div class="s-notice s-notice__warning" role="status">…</div>
<div class="s-notice s-notice__danger" role="status">…</div>

Default filled message style

Info filled message style

Success filled message style Link

Warning filled message style

Danger filled message style

Filled important

Section titled Filled important

Used sparingly for when an important notice needs to be noticed

<div class="s-notice s-notice__important" role="alert">…</div>
<div class="s-notice s-notice__info s-notice__important" role="alert">…</div>
<div class="s-notice s-notice__success s-notice__important" role="alert">… <a class="s-link s-link__inherit s-link__underlined" href="…">…</a></div>
<div class="s-notice s-notice__warning s-notice__important" role="alert">…</div>
<div class="s-notice s-notice__danger s-notice__important" role="alert">…</div>

Inverted important message style

Info important message style. Link

Success important message style

Warning important message style

Danger important message style

Behaviors

Section titled Behaviors

Behavior	Class	Applied to	Description
Inline	`.s-notice`	N/A	Notice inserted within the content area.
Toast	`.s-toast`	`Container`	Adds a container to properly fix a floating toast notice to the top-center of the page. These toasts typically disappear after a set time (i.e. 3 seconds)

Inline

Section titled Inline

Default behavior for notices that are inserted within the content area

<div class="s-notice s-notice__info" role="status">…</div>

Inline notice message style

With an Icon

Section titled With an Icon

Notices are often accompanied by an icon.

<div class="d-flex s-notice s-notice__info" role="status">
    <div class="flex--item mr8">
        @Svg.Alert
    </div>
    <div class="flex--item lh-lg">
        …
    </div>
</div>

This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.

Toast

Section titled Toast

Floating notices, but aligned to the top and center of the page and they disappear after a set time. Visibility is changed with animation by toggling between aria-hidden="true" and aria-hidden="false". When including buttons, you can apply .s-notice--btn to buttons to apply a toast-specific color.

<div class="s-toast" aria-hidden="true" role="alertdialog" aria-labelledby="notice-message">
    <aside class="s-notice s-notice__success p8 pl16">
        <div class="d-flex gx16 ai-center jc-space-between">
            <div class="flex--item" id="notice-message">
                Toast notice message with an undo button
            </div>
            <div class="d-flex">
                <button type="button" class="s-btn s-notice--btn">
                    Undo
                </button>
                <button type="button" class="s-btn s-notice--btn" aria-label="Dismiss">
                    @Svg.ClearSm
                </button>
            </div>
        </div>
    </aside>
</div>

Toast notice message with an undo button