Stacks

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 JavaScript

Attributes

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

Base

Section titled Base

Default notice variations

<div class="s-notice" role="status">
    <span class="s-notice--icon">@Svg.Help</span>
    …
</div>
<div class="s-notice s-notice__info" role="status">
    <span class="s-notice--icon">@Svg.Info</span>
    …
</div>
<div class="s-notice s-notice__success s-anchors s-anchors__inherit s-anchors__underlined" role="status">
    <span class="s-notice--icon">@Svg.Check</span>
    … <a href="…">…</a>
</div>
<div class="s-notice s-notice__warning" role="status">
    <span class="s-notice--icon">@Svg.Alert</span>
    …
</div>
<div class="s-notice s-notice__danger" role="status">
    <span class="s-notice--icon">@Svg.AlertFill</span>
    …
</div>
<div class="s-notice s-notice__featured" role="status">
    <span class="s-notice--icon">@Svg.Star</span>
    …
</div>
<div class="s-notice s-notice__activity" role="status">
    <span class="s-notice--icon">@Svg.Notification</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

Section titled 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.Help</span>
    …
</div>
<div class="s-notice s-notice__info s-notice__important" role="alert">
    <span class="s-notice--icon">@Svg.Info</span>
    …
</div>
<div class="s-notice s-notice__success s-notice__important s-anchors s-anchors__inherit s-anchors__underlined" role="alert">
    <span class="s-notice--icon">@Svg.Info</span>
    … <a href="…">…</a>
</div>
<div class="s-notice s-notice__warning s-notice__important" role="alert">
    <span class="s-notice--icon">@Svg.Alert</span>
    …
</div>
<div class="s-notice s-notice__danger s-notice__important" role="alert">
    <span class="s-notice--icon">@Svg.AlertFill</span>
    …
</div>
<div class="s-notice s-notice__featured s-notice__important" role="alert">
    <span class="s-notice--icon">@Svg.Star</span>
    …
</div>
<div class="s-notice s-notice__activity s-notice__important" role="alert">
    <span class="s-notice--icon">@Svg.Notification</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

Section titled 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">
    Notice with <a href="#" class="s-link">default link style</a>
</div>
<div class="s-notice s-notice__info s-anchors s-anchors__inherit s-anchors__underlined" role="presentation">
    Notice with <a href="#">custom link style</a>
</div>

Notice with default link style

Notice with .s-anchors .s-anchors__inherit .s-anchors__underlined and custom link 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)

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 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 ai-center wmn4">
        <span class="s-notice--icon">@Svg.Info</span>
        Toast notice message with an undo button
        <div class="d-flex ml-auto">
            <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.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.

Featured toast with an undo button.

Activity toast with an undo button.

Sections

Notices

Accessibility

JavaScript

Attributes

Events

Helpers

Visual styles

Classes

Base

Important

Styling child links

Behaviors

Toast