@spectrum-web-components/toast NPM | npm.io

0.42.2 • Published 27 days ago

Install

Weekly downloads

303

License

Apache-2.0

Repository

Last release

27 days ago

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.

spectrum css web components lit-element lit-html

@spectrum-web-components/base @spectrum-web-components/button @spectrum-web-components/icon @spectrum-web-components/icons-workflow @spectrum-web-components/shared

@infinitebrahmanuniverse/nolb-_spe @everything-registry/sub-chunk-857 @spectrum-web-components/bundle @mikegoogz/checkout-demo zack-search @swc-react/toast

27 days ago

28 days ago

1 month ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

5 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

7 months ago

7 months ago

6 months ago

6 months ago

7 months ago

9 months ago

6 months ago

9 months ago

10 months ago

10 months ago

9 months ago

0.33.3-overlay.66

10 months ago

0.33.3-overlay.65

10 months ago

0.33.3-overlay.61

10 months ago

0.31.1-react.21

11 months ago

11 months ago

12 months ago

12 months ago

0.30.1-overlay.30

12 months ago

0.33.1-overlay.39

11 months ago

0.30.1-overlay.31

12 months ago

11 months ago

11 months ago

0.30.1-overlay.38

12 months ago

0.30.1-overlay.37

12 months ago

0.30.1-overlay.41

12 months ago

0.30.1-overlay.42

12 months ago

0.30.1-overlay.40

12 months ago

12 months ago

0.33.1-overlay.41

11 months ago

0.32.1-overlay.33

11 months ago

0.32.1-overlay.41

11 months ago

12 months ago

0.31.1-overlay.29

12 months ago

0.11.15-overlay.22

1 year ago

0.11.17-overlay.18

1 year ago

0.11.17-overlay.17

1 year ago

0.11.17-overlay.14

1 year ago

0.11.17-overlay.15

1 year ago

0.11.17-overlay.12

1 year ago

0.11.17-overlay.13

1 year ago

0.11.17-overlay.10

1 year ago

0.11.17-overlay.11

1 year ago

0.11.15-overlay.9

1 year ago

0.11.15-overlay.8

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.11.13-overlay.33

1 year ago

0.11.11-react.75

1 year ago

1 year ago

0.11.11-react.49

1 year ago

0.11.11-react.48

1 year ago

0.11.11-react.50

1 year ago

1 year ago

0.11.10-overlay-warning.19

1 year ago

0.11.11-react.32

1 year ago

1 year ago

1 year ago

0.11.8-react.54

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

0.10.15-devmode2.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.11.0-devmode.0

2 years ago

0.10.15-devmode.0

2 years ago

0.10.14-devmode.0

2 years ago

0.10.14-devmode.7

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.10.3-express.0

2 years ago

0.10.5-express.9

2 years ago

0.10.4-express.12

2 years ago

2 years ago

2 years ago

2 years ago

0.9.1-lit-next.0

2 years ago

2 years ago

0.8.18-lit-next.0

3 years ago

3 years ago

0.8.17-lit-next.24

3 years ago

0.8.17-lit-next.0

3 years ago

3 years ago

0.8.16-lit-next.0

3 years ago

3 years ago

0.8.15-lit-next.0

3 years ago

3 years ago

3 years ago

0.8.14-alpha.30

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.8.10-alpha.14

3 years ago

0.8.10-alpha.13

3 years ago

0.8.10-alpha.12

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.5.5-alpha.178

3 years ago

3 years ago

3 years ago

0.5.5-alpha.169

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago