sp-toast

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
open open boolean false
timeout timeout number | null
variant variant ToastVariants The variant applies specific styling when set to `negative`, `positive`, `info`, `error`, or `warning`. `variant` attribute is removed when not matching one of the above.

Slots #

Name Description
default slot The toast content
action button element surfacing an action in the Toast

Events #

Name Type Description
close CustomEvent Announces that the Toast has been closed.

CSS Custom Properties #

Name Default
--spectrum-toast-info-background-color var(--spectrum-semantic-informative-background-color)
--spectrum-toast-info-text-font-weight var(--spectrum-alias-body-text-font-weight)
--spectrum-toast-info-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-toast-info-text-size var(--spectrum-global-dimension-font-size-100)
--spectrum-toast-negative-background-color var(--spectrum-semantic-negative-background-color)
--spectrum-toast-neutral-background-color var(--spectrum-semantic-neutral-background-color-default)
--spectrum-toast-neutral-border-radius var(--spectrum-alias-border-radius-regular)
--spectrum-toast-neutral-button-gap-x var(--spectrum-global-dimension-size-100)
--spectrum-toast-neutral-content-padding-right var(--spectrum-global-dimension-size-200)
--spectrum-toast-neutral-content-padding-top var(--spectrum-global-dimension-size-65)
--spectrum-toast-neutral-icon-padding-right var(--spectrum-global-dimension-size-150)
--spectrum-toast-neutral-padding-left var(--spectrum-global-dimension-size-200)
--spectrum-toast-neutral-padding-right var(--spectrum-global-dimension-size-100)
--spectrum-toast-neutral-padding-y var(--spectrum-global-dimension-size-100)
--spectrum-toast-neutral-text-color var(--spectrum-global-color-static-white)
--spectrum-toast-neutral-text-font-weight var(--spectrum-alias-body-text-font-weight)
--spectrum-toast-neutral-text-size var(--spectrum-global-dimension-font-size-100)
--spectrum-toast-positive-background-color var(--spectrum-semantic-positive-background-color)

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