Notices

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

Classes

Class	Description	Parent	Modifies
`.s-notice`	Base notice parent class. Use inside `.s-toast` when rendered as a toast.	N/A	N/A
`.s-notice--actions`	Container styling for notice actions including the dismiss button.	`.s-notice`	N/A
`.s-notice--dismiss`	Applies to child button element within the notice to position it appropriately.	`.s-notice`	N/A
`.s-notice__activity`	Applies activity (pink) visual styles.	N/A	`.s-notice`
`.s-notice__danger`	Applies danger (red) visual styles.	N/A	`.s-notice`
`.s-notice__featured`	Applies featured (purple) visual styles.	N/A	`.s-notice`
`.s-notice__important`	Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user.	N/A	`.s-notice`
`.s-notice__info`	Applies info (blue) visual styles.	N/A	`.s-notice`
`.s-notice__success`	Applies success (green) visual styles.	N/A	`.s-notice`
`.s-notice__warning`	Applies warning (yellow) visual styles.	N/A	`.s-notice`
`.s-toast`	Parent of `.s-notice`. See the Toast section for more information.	N/A	N/A

Accessibility

Item	Description	Applies to
`aria-labelledby="[id]"`	Used to reference the alert message within the dialog. If you are using `.s-toast`, this must be applied.	`.s-toast`
`aria-hidden="[state]"`	Informs assistive technologies if they should ignore the element. When applied to `.s-toast`, Stacks will use this attribute to show or hide the toast.	`.s-toast`
`aria-label="[text]"`	Labels the element for assistive technologies. This should be used on any button that does not contain text content.	`.s-btn`
`role="alert"`	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.	`.s-notice`
`role="alertdialog"`	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.	`.s-toast`
`role="status"`	A form of live region which contains advisory information but is not 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.	`.s-notice`

Examples

Base

<div class="s-notice" role="status">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>…</span>
</div>
<div class="s-notice s-notice__info" role="status">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>…</span>
</div>
<div class="s-notice s-notice__success" role="status">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>… <a href="…">…</a></span>
</div>
<div class="s-notice s-notice__warning" role="status">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>…</span>
</div>
<div class="s-notice s-notice__danger" role="status">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>…</span>
</div>
<div class="s-notice s-notice__featured" role="status">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>…</span>
</div>
<div class="s-notice s-notice__activity" role="status">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>…</span>
</div>

Default filled message style and some code notice. Link

Info filled message style and some code notice. Link

Success filled message style and some code notice. Link

Warning filled message style and some code notice. Link

Danger filled message style and some code notice. Link

Featured filled message style and some code notice. Link

Activity filled message style and some code notice. Link

Important

Used sparingly for when an important notice needs to be noticed

<div class="s-notice s-notice__important" role="alert">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>…</span>
</div>
<div class="s-notice s-notice__info s-notice__important" role="alert">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>…</span>
</div>
<div class="s-notice s-notice__success s-notice__important" role="alert">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>… <a href="…">…</a></span>
</div>
<div class="s-notice s-notice__warning s-notice__important" role="alert">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>…</span>
</div>
<div class="s-notice s-notice__danger s-notice__important" role="alert">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>…</span>
</div>
<div class="s-notice s-notice__featured s-notice__important" role="alert">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>…</span>
</div>
<div class="s-notice s-notice__activity s-notice__important" role="alert">
    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
    <span>…</span>
</div>

Default filled message style and some code notice. Link

Info filled message style and some code notice. Link

Success filled message style and some code notice. Link

Warning filled message style and some code notice. Link

Danger filled message style and some code notice. Link

Featured filled message style and some code notice. Link

Activity filled message style and some code notice. Link

Styling child links

We recommend using descendent anchor classes, typically .s-anchors.s-anchors__inherit.s-anchors__underlined for notices containing links generated from markdown when you cannot manually generate the inner html.

<div class="s-notice s-notice__info" role="presentation">
    <span>Notice with <a href="#" class="s-link">default link style</a></span>
</div>
<div class="s-notice s-notice__info s-anchors s-anchors__inherit s-anchors__underlined" role="presentation">
    <span>Notice with <a href="#">styled link</a></span>
</div>

Default

Notice with default link style

.s-anchors .s-anchors__inherit .s-anchors__underlined

Notice with styled link

Toast

We are phasing out Toasts due to significant accessibility barriers. Avoid this component for new features. Instead, prioritize integrated alternatives—such as component state changes or inline messages—to provide accessible feedback directly where the user is focused.

Toasts are floating notices that are aligned to the center top of the page. They disappear after a set time. Visibility is changed with animation by toggling between aria-hidden="true" and aria-hidden="false". When including a dismiss button the .s-notice--dismiss class should be applied to the button for toast-specific styling.

<div
    role="alertdialog"
    id="example-toast"
    class="s-toast"
    aria-hidden="true"
    aria-labelledby="toast-message"
    data-controller="s-toast"
    data-s-toast-target="toast"
    data-s-toast-return-element=".js-example-toast-open[data-target='#example-toast']">
    <aside class="s-notice d-flex wmn4">
        <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
        <span>Toast notice message with an undo button</span>
        <div class="s-notice--actions">
            <button type="button" class="s-link s-link__underlined">Undo</button>
            <button type="button" class="s-link s-notice--dismiss js-toast-close" aria-label="Dismiss">
                <svg aria-hidden="true">…</svg>
            </button>
        </div>
    </aside>
</div>

Default toast with an undo button.

Info toast with an undo button.

JavaScript

Attributes

Attribute	Description	Applies to
`data-controller="s-toast"`	Wires up the element to the toast controller. This may be a `.s-toast` element or a wrapper element.	Controller element
`data-s-toast-target="toast"`	Wires up the element that is to be shown/hidden.	Controller element
`data-s-toast-target="initialFocus"`	Designates which element to focus on toast show. If absent, defaults to the first focusable element within the toast.	Any child focusable element
`data-action="s-toast#toggle"`	Wires up the element to toggle the visibility of a toast.	Toggling element
`data-s-toast-return-element="[selector]"`	(optional) Designates the element to return focus to when the toast is closed. If left unset, focus is not altered on close.	Controller element
`data-s-toast-remove-when-hidden="true"`	(optional) Removes the toast from the DOM entirely when it is hidden.	Controller element

Events

Event	Description	Applies to
`s-toast:show`	Fires immediately before showing the toast. Calling `.preventDefault()` cancels the display of the toast.	Toast target
`s-toast:shown`	Fires after the toast has been visually shown.	Toast target
`s-toast:hide`	Fires immediately before hiding the toast. Calling `.preventDefault()` cancels the removal of the toast.	Toast target
`s-toast:hidden`	Fires after the toast has been visually hidden.	Toast target

Event details

event.detail	Description	Applicable events
`dispatcher`	Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the toast that caused it to hide, etc.	s-toast:*
`returnElement`	Contains the Element to return focus to on hide. If a value is set to this property inside an event listener, it will be updated on the controller as well.	s-toast:show, s-toast:hide

Helpers

The following helpers are available to manually show and hide a toast notice.

Function	Description	Parameters
`Stacks.showToast`	Helper to manually show an s-toast element via external JS.	element
`Stacks.hideToast`	Helper to manually hide an s-toast element via external JS.	element