@spectrum-web-components/toast

Overview

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

Example

Default

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

With Actions

<sp-toast>
    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 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 variant="negative">
    This is negative information that you should read, soon.
</sp-toast>

Positive

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

Info

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