sp-toast

Examples API

Attributes and Properties #

Property Attribute Type Default Description open open boolean false timeout timeout number | null When a timeout is provided it represents the number of milliseconds from when the Toast was placed on the page before it will automatically dismiss itself. Accessibility concerns require that a Toast is available for at least 6000ms before being dismissed, so any timeout of less than 6000ms will be raised to that baseline. It is suggested that messages longer than 120 words should receive another 1000ms in their timeout for each additional 120 words in the message. E.G. 240 words = 7000ms, 360 words = 8000ms, etc. variant variant ToastVariants The variant applies specific styling when set to `negative`, `positive`, `info`, `error`, or `warning`. `variant` attribute is removed when not matching one of the above.

Slots #

Name Description default slot The toast content action button element surfacing an action in the Toast

Events #

Name Type Description close CustomEvent Announces that the Toast has been closed by the user or by its timeout.

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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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.