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