sp-toast

NPM 1.4.0

View Storybook

Try it on webcomponents.dev
Overview API Changelog

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

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

<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-color="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-color="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.