Notices

Figma

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

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)
Attribute Applied to Description
data-controller="s-toast" Controller element Wires up the element to the toast controller. This may be a .s-toast element or a wrapper element.
data-s-toast-target="toast" .s-toast element Wires up the element that is to be shown/hidden
data-s-toast-target="initialFocus" Any child focusable element Optional Designates which element to focus on toast show. If absent, defaults to the first focusable element within the toast.
data-action="s-toast#toggle" Toggling element Wires up the element to toggle the visibility of a toast
data-s-toast-return-element="[css selector]" Controller element Optional Designates the element to return focus to when the toast is closed. If left unset, focus is not altered on close.
data-s-toast-remove-when-hidden="true" Controller element Optional Removes the toast from the DOM entirely when it is hidden
Event Element Description
s-toast:show Toast target Default preventable Fires immediately before showing the toast. Calling .preventDefault() cancels the display of the toast.
s-toast:shown Toast target Fires after the toast has been visually shown
s-toast:hide Toast target Default preventable Fires immediately before hiding the toast. Calling .preventDefault() cancels the removal of the toast.
s-toast:hidden Toast target Fires after the toast has been visually hidden
event.detail Applicable events Description
dispatcher s-toast:* 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.
returnElement s-toast:show, s-toast:hide 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.
Function Parameters Description
Stacks.showToast element: the element the data-controller="s-toast" attribute is on

Helper to manually show an s-toast element via external JS
Stacks.hideToast element: the element the data-controller="s-toast" attribute is on

Helper to manually hide an s-toast element via external JS
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.

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>

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>
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)

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

Notices are often accompanied by an icon.

<div class="d-flex s-notice s-notice__info" role="status">
<div class="mr8">
@Svg.Alert
</div>
<div class="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.

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
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 ai-center gx16 jc-space-between p8 pl16 wmn4">
<div 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>
</aside>
</div>
Deploys by Netlify