sp-toast
Attributes and Properties #
open
open
boolean
false
timeout
timeout
number | null
variant
variant
ToastVariants
Slots #
default slot
action
Events #
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"
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
.