sp-toast

Overview API Changelog

Description

Section titled 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

Section titled 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

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

With actions

Section titled With actions
<sp-toast open>
    This is important information that you should read, soon.
    <sp-button
        slot="action"
        static-color="white"
        variant="secondary"
        treatment="outline"
    >
        Do something
    </sp-button>
</sp-toast>

Wrapping

Section titled Wrapping
<sp-toast open style="width: 300px">
    This is important information that you should read, soon.
    <sp-button
        slot="action"
        static-color="white"
        variant="secondary"
        treatment="outline"
    >
        Do something
    </sp-button>
</sp-toast>

Variants

Section titled Variants

Negative

Section titled Negative
<sp-toast open variant="negative">
    This is negative information that you should read, soon.
</sp-toast>

Positive

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

Info

Section titled Info
<sp-toast open variant="info">
    This is information that you should read.
</sp-toast>

Accessibility

Section titled 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.