sp-toast

Examples

API

Attributes and Properties #

Property	Attribute	Type	Default	Description
`dir`	`dir`	`'ltr' \| 'rtl'`	`'ltr'`
`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 #

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" variant="overBackground" quiet>
        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" variant="overBackground" quiet>
        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.

Spectrum Web Components