Sections
Notices
Figma
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) |
JavaScript
Section titled JavaScriptAttributes
Section titled Attributes| 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 |
Events
Section titled Events| 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. |
Helpers
Section titled Helpers| 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 |
Visual styles
Section titled Visual stylesClasses
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 FilledDefault 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>Filled important
Section titled Filled importantUsed 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>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 InlineDefault 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 IconNotices 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.
Toast
Section titled ToastFloating 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>Default toast with an undo button.
Info toast with an undo button.
Success toast with an undo button.
Warning toast with an undo button.
Danger toast with an undo button.
