JSPM – @spectrum-web-components/toast@0.8.11-alpha.1+23ae605e

Package Exports

@spectrum-web-components/toast
@spectrum-web-components/toast/package.json
@spectrum-web-components/toast/sp-toast
@spectrum-web-components/toast/sp-toast.js
@spectrum-web-components/toast/src/Toast.d.ts
@spectrum-web-components/toast/src/Toast.js
@spectrum-web-components/toast/src/Toast.js.map
@spectrum-web-components/toast/src/index.d.ts
@spectrum-web-components/toast/src/index.js
@spectrum-web-components/toast/src/index.js.map
@spectrum-web-components/toast/src/spectrum-config.js
@spectrum-web-components/toast/src/spectrum-toast.css.d.ts
@spectrum-web-components/toast/src/spectrum-toast.css.js
@spectrum-web-components/toast/src/spectrum-toast.css.js.map
@spectrum-web-components/toast/src/toast.css.d.ts
@spectrum-web-components/toast/src/toast.css.js
@spectrum-web-components/toast/src/toast.css.js.map

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@spectrum-web-components/toast) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Default

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