@spectrum-web-components/toast

Description

sp-toast elements display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken.

Usage

yarn add @spectrum-web-components/toast

Import the side effectful registration of <sp-toast> via:

import '@spectrum-web-components/toast/sp-toast.js';

When looking to leverage the Toast base class as a type and/or for extension purposes, do so via:

import { Toast } from '@spectrum-web-components/toast';

Example

<sp-toast open>
    This is important information that you should read, soon.
</sp-toast>

With actions

<sp-toast open>
    This is important information that you should read, soon.
    <sp-button
        slot="action"
        static="white"
        variant="secondary"
        treatment="outline"
    >
        Do something
    </sp-button>
</sp-toast>

Wrapping

<sp-toast open style="width: 300px">
    This is important information that you should read, soon.
    <sp-button
        slot="action"
        static="white"
        variant="secondary"
        treatment="outline"
    >
        Do something
    </sp-button>
</sp-toast>

Variants

Negative

<sp-toast open variant="negative">
    This is negative information that you should read, soon.
</sp-toast>

Positive

<sp-toast open variant="positive">
    This is positive information that you should read, soon.
</sp-toast>

Info

<sp-toast open variant="info">
    This is information that you should read.
</sp-toast>

Accessibility

An <sp-toast> element is by default rendered with a role of alert. When rendering the <sp-toast> to a page, it should be place in a container with a role of region.

Changelog

0.40.3 (2024-01-11)

Bug Fixes

• button: adds pending button, fixes #3162 (#3163) (71254ec)
• overlay: automatically reposition overlay when the contents resize (83be807)
• overlay: move closed overlays to "display: none" (fc0278b)
• overlay: normalize popover toggling between native and synthetic [popover] usage (26fa692)
• overlay: support positioning overlays within parents leveraging container-type rules (21044b3)
• overlay: surface "overlay" property to "sp-opened" and "sp-closed" events (957f8e9)
• picker: force close slotted Tooltip elements with disabled when Menu openes (82c8f12)
• picker: prevent the Menu opening until required dependencies are loaded (55e6174)
• tooltip: surface "delayed" and "disabled" functionality (#3882) (ae9fcd2)
• top-nav: allow consumers to "ignore-url-parts" or "search" or "hash" (#3923) (83bf70b)