sp-toast
NPM
1.0.1
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
open
open
boolean
false
timeout
timeout
number | null
variant
variant
ToastVariants
Slots #
default slot
action
Events #
close
CustomEvent
Announces that the Toast has been closed by the user or by its timeout.
1.0.1 (2024-11-11) #
Note: Version bump only for package @spectrum-web-components/toast
1.0.0 (2024-10-31) #
Note: Version bump only for package @spectrum-web-components/toast
0.49.0 (2024-10-15) #
Features #
- add
static-color
to replacestatic
(#4808 ) (43cf086 )
0.48.1 (2024-10-01) #
Note: Version bump only for package @spectrum-web-components/toast
0.48.0 (2024-09-17) #
Bug Fixes #
- toast: added ability to wrap toast content with long words (
#4738 ) (302d6fe )
0.47.2 (2024-09-03) #
Note: Version bump only for package @spectrum-web-components/toast
0.47.1 (2024-08-27) #
Note: Version bump only for package @spectrum-web-components/toast
0.47.0 (2024-08-20) #
Note: Version bump only for package @spectrum-web-components/toast
0.46.0 (2024-08-08) #
Note: Version bump only for package @spectrum-web-components/toast
0.45.0 (2024-07-30) #
Note: Version bump only for package @spectrum-web-components/toast
0.44.0 (2024-07-15) #
Note: Version bump only for package @spectrum-web-components/toast
0.43.0 (2024-06-11) #
Note: Version bump only for package @spectrum-web-components/toast
0.42.5 (2024-05-24) #
Note: Version bump only for package @spectrum-web-components/toast
0.42.4 (2024-05-14) #
Note: Version bump only for package @spectrum-web-components/toast
0.42.3 (2024-05-01) #
Note: Version bump only for package @spectrum-web-components/toast
0.42.2 (2024-04-03) #
Note: Version bump only for package @spectrum-web-components/toast
0.42.1 (2024-04-02) #
Note: Version bump only for package @spectrum-web-components/toast
0.42.0 (2024-03-19) #
Features #
- asset: use core tokens (
99e76f4 )
0.41.2 (2024-03-05) #
Note: Version bump only for package @spectrum-web-components/toast
0.41.1 (2024-02-22) #
Note: Version bump only for package @spectrum-web-components/toast
0.41.0 (2024-02-13) #
Note: Version bump only for package @spectrum-web-components/toast
0.40.5 (2024-02-05) #
Note: Version bump only for package @spectrum-web-components/toast
0.40.4 (2024-01-29) #
Note: Version bump only for package @spectrum-web-components/toast
0.40.3 (2024-01-11) #
Note: Version bump only for package @spectrum-web-components/toast
0.40.2 (2023-12-18) #
Note: Version bump only for package @spectrum-web-components/toast
0.40.1 (2023-12-05) #
Note: Version bump only for package @spectrum-web-components/toast
0.40.0 (2023-11-16) #
Note: Version bump only for package @spectrum-web-components/toast
0.39.4 (2023-11-02) #
Note: Version bump only for package @spectrum-web-components/toast
0.39.3 (2023-10-18) #
Note: Version bump only for package @spectrum-web-components/toast
0.39.2 (2023-10-13) #
Note: Version bump only for package @spectrum-web-components/toast
0.39.1 (2023-10-06) #
Bug Fixes #
- progress-circle,toast,tooltip: ensure complete dependency graph (
#3701 ) (a5dfada )
0.39.0 (2023-09-25) #
Note: Version bump only for package @spectrum-web-components/toast
0.38.0 (2023-09-05) #
Note: Version bump only for package @spectrum-web-components/toast
0.37.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/toast
0.36.0 (2023-08-18) #
Bug Fixes #
- close button static white (
d324017 ) - toast: switches toast[open] to use visibility hidden to fix overlay handling (
#3511 ) (8428cad ), closes#3510
0.35.0 (2023-07-31) #
Note: Version bump only for package @spectrum-web-components/toast
0.34.0 (2023-07-11) #
Note: Version bump only for package @spectrum-web-components/toast
0.33.2 (2023-06-14) #
Note: Version bump only for package @spectrum-web-components/toast
0.33.0 (2023-06-08) #
Note: Version bump only for package @spectrum-web-components/toast
0.32.0 (2023-06-01) #
Note: Version bump only for package @spectrum-web-components/toast
0.31.0 (2023-05-17) #
Note: Version bump only for package @spectrum-web-components/toast
0.30.0 (2023-05-03) #
Bug Fixes #
- correct
@element jsDoc listing across library (c97a632 ) - ensure browser understandable extensions (
f4e59f7 ) - include default export in the "exports" fields (
f32407d ) - include the "types" entry in package.json files (
b432f59 ) - stop merging selectors in a way that alters the cascade (
369388f ) - toast: ensure "close" event only triggers when open===false (
7fa08ba ) - toast: include dependencies (
1b82212 ) - update latest Spectrum CSS beta releases (
d8d3acc ) - update side effect listings (
8160d3a ) - update to latest spectrum-css packages (
a5ca19f ) - use icons without "size" values (
3fc7c91 ) - use latest @spectrum-css/* versions (
c35eb86 )
Features #
- action-button: add action button pattern (
03ac00a ) - add and use icons-ui package (
d9c3ab2 ) - adopt DNA@7 base Spectrum CSS (
e08cafd ) - include all Dev Mode files in side effects (
f70817c ) - leverage "exports" field in package.json (
321abd7 ) - pass through autocomplete attribute to inputs (
5416510 ) - shared pkg versions, devmode define warning, registry-conflicts docs (
6e49565 ) - toast: add "sp-toast" pattern (
d0a5f00 ) - toast: default to "open === false", always dispatch "close" event (
fcb3729 ) - toast: update spectrum css input (
183ee95 ) - update lit-* dependencies, wip (
377f3c8 ) - update to Spectrum CSS v3.0.0 (
e8b3d8f ) - use latest exports specification (
a7ecf4b )
Performance Improvements #
- use "sideEffects" listing in package.json (
7271614 )
Reverts #
- Revert "chore: release new versions" (
a6d655d )
0.11.16 (2023-04-24) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.15 (2023-04-05) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.14 (2023-03-22) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.13 (2023-03-08) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.12 (2023-02-13) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.11 (2023-02-08) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.10 (2023-01-23) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.9 (2023-01-09) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.8 (2022-12-08) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.7 (2022-11-21) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.6 (2022-11-14) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.5 (2022-10-28) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.4 (2022-10-17) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.3 (2022-10-10) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.2 (2022-09-14) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.1 (2022-08-24) #
Note: Version bump only for package @spectrum-web-components/toast
0.11.0 (2022-08-09) #
Features #
- include all Dev Mode files in side effects (
f70817c )
0.10.14 (2022-08-04) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.13 (2022-07-18) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.12 (2022-06-29) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.11 (2022-06-07) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.10 (2022-05-27) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.9 (2022-05-12) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.8 (2022-04-21) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.7 (2022-03-30) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.6 (2022-03-08) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.5 (2022-03-04) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.4 (2022-02-22) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.3 (2022-01-26) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.2 (2022-01-07) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.1 (2021-12-13) #
Note: Version bump only for package @spectrum-web-components/toast
0.10.0 (2021-11-08) #
Features #
- update lit-* dependencies, wip (
377f3c8 )
0.9.1 (2021-11-08) #
Note: Version bump only for package @spectrum-web-components/toast
0.9.0 (2021-11-02) #
Features #
- adopt DNA@7 base Spectrum CSS (
e08cafd )
0.8.17 (2021-10-12) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.16 (2021-09-20) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.15 (2021-09-13) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.14 (2021-08-24) #
Bug Fixes #
- correct
@element jsDoc listing across library (c97a632 )
0.8.13 (2021-08-03) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.12 (2021-07-22) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.11 (2021-07-01) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.10 (2021-06-16) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.9 (2021-06-07) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.8 (2021-05-24) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.7 (2021-05-12) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.6 (2021-04-15) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.5 (2021-04-09) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.4 (2021-03-29) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.3 (2021-03-22) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.2 (2021-03-22) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.1 (2021-03-05) #
Note: Version bump only for package @spectrum-web-components/toast
0.8.0 (2021-03-04) #
Features #
- use latest exports specification (
a7ecf4b )
0.7.3 (2021-02-11) #
Bug Fixes #
- update to latest spectrum-css packages (
a5ca19f )
0.7.2 (2021-02-02) #
Note: Version bump only for package @spectrum-web-components/toast
0.7.1 (2021-01-28) #
Note: Version bump only for package @spectrum-web-components/toast
0.7.0 (2021-01-21) #
Bug Fixes #
- toast: ensure "close" event only triggers when open===false (
7fa08ba ) - include the "types" entry in package.json files (
b432f59 ) - stop merging selectors in a way that alters the cascade (
369388f ) - update latest Spectrum CSS beta releases (
d8d3acc ) - use icons without "size" values (
3fc7c91 ) - use latest @spectrum-css/* versions (
c35eb86 )
Features #
- action-button: add action button pattern (
03ac00a ) - toast: default to "open === false", always dispatch "close" event (
fcb3729 ) - toast: update spectrum css input (
183ee95 )
0.6.0 (2021-01-13) #
Bug Fixes #
- include the "types" entry in package.json files (
b432f59 ) - stop merging selectors in a way that alters the cascade (
369388f ) - update latest Spectrum CSS beta releases (
d8d3acc ) - use icons without "size" values (
3fc7c91 ) - use latest @spectrum-css/* versions (
c35eb86 )
Features #
- action-button: add action button pattern (
03ac00a ) - toast: default to "open === false", always dispatch "close" event (
fcb3729 ) - toast: update spectrum css input (
183ee95 )
0.5.4 (2020-10-12) #
Note: Version bump only for package @spectrum-web-components/toast
0.5.3 (2020-10-12) #
Bug Fixes #
- include default export in the "exports" fields (
f32407d )
0.5.2 (2020-09-25) #
Bug Fixes #
- update side effect listings (
8160d3a )
0.5.1 (2020-09-14) #
Note: Version bump only for package @spectrum-web-components/toast
0.5.0 (2020-08-31) #
Features #
- update to Spectrum CSS v3.0.0 (
e8b3d8f )
0.4.4 (2020-08-19) #
Note: Version bump only for package @spectrum-web-components/toast
0.4.3 (2020-07-27) #
Note: Version bump only for package @spectrum-web-components/toast
0.4.2 (2020-07-24) #
Bug Fixes #
- ensure browser understandable extensions (
f4e59f7 )
0.4.1 (2020-07-22) #
Note: Version bump only for package @spectrum-web-components/toast
0.4.0 (2020-07-17) #
Features #
- leverage "exports" field in package.json (
321abd7 )
0.3.4 (2020-06-08) #
Note: Version bump only for package @spectrum-web-components/toast
0.3.3 (2020-05-12) #
Note: Version bump only for package @spectrum-web-components/toast
0.3.2 (2020-05-08) #
Note: Version bump only for package @spectrum-web-components/toast
0.3.1 (2020-04-21) #
Note: Version bump only for package @spectrum-web-components/toast
0.3.0 (2020-04-16) #
Features #
- add and use icons-ui package (
d9c3ab2 )
Performance Improvements #
- use "sideEffects" listing in package.json (
7271614 )
0.2.5 (2020-04-10) #
Note: Version bump only for package @spectrum-web-components/toast
0.2.4 (2020-04-07) #
Note: Version bump only for package @spectrum-web-components/toast
0.2.3 (2020-03-11) #
Note: Version bump only for package @spectrum-web-components/toast
0.2.2 (2020-02-05) #
Note: Version bump only for package @spectrum-web-components/toast
0.2.1 (2020-02-01) #
Note: Version bump only for package @spectrum-web-components/toast
0.2.0 (2020-01-30) #
Features #
- pass through autocomplete attribute to inputs (
5416510 )
0.1.2 (2020-01-06) #
Note: Version bump only for package @spectrum-web-components/toast
0.1.1 (2019-12-12) #
Bug Fixes #
- toast: include dependencies (
1b82212 )
0.1.0 (2019-12-09) #
Features #
- toast: add "sp-toast" pattern (
d0a5f00 )
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-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
.