Toast Item
Toast items are individual notifications displayed within a toast container.
-
Pro Components -
Responsive Layout Tools -
Ever-Growing Pattern Library -
Unlimited Hosted Projects -
Pre-Built Pro Themes -
Pro Theme Builder -
Pro Color Tools -
Official Figma Design Kit Newer additions to Web Awesome, like <wa-toast>, aren't included in the currently available kit, but a new version is in the works.
Track its progress on GitHub. -
WA Pro Perpetual License -
Actual Human™ Support
Already have Pro? Log in
Toast items are meant to live inside a <wa-toast> container.
The container manages their lifecycle and positioning. For usage examples showing how to display notifications, see the Toast documentation.
Examples
Variant
Use the variant attribute to change the toast item's visual style. The variant determines the accent color on the left side and the icon color. Available variants are neutral (default), brand, success, warning, and danger.
Size
Use the size attribute to change the toast item's size.
Icons
Use the icon slot to display an icon at the start of the toast item. The icon color automatically matches the variant's accent color.
Toast items work fine without icons too.
Providing Content
The default slot accepts any HTML content, allowing you to create rich notifications with formatted text, links, and interactive elements.
Duration
The duration attribute controls how long the toast item displays before automatically dismissing (in milliseconds). The default is 5000 (5 seconds). Set to 0 to disable auto-dismissal.
When a duration is set, a progress ring appears around the close button showing the remaining time.
<wa-toast-item variant="brand" duration="5000">...</wa-toast-item> <wa-toast-item variant="brand" duration="10000">...</wa-toast-item> <wa-toast-item variant="brand" duration="0">...</wa-toast-item>
Hover & Focus Behavior
Toast items automatically pause their countdown timer when the user hovers over them or when the close button receives focus, giving more time to read the content. When the mouse leaves or focus moves away, the timer resets and begins counting down again.
The Close Button
Every toast item includes a close button that allows users to dismiss the notification. When duration is greater than 0, the close button displays a progress ring showing the remaining time.
Customizing the Accent
Use the --accent-width custom property to adjust the width of the accent line, or hide it entirely.
Customizing the Padding
Use the --padding custom property to adjust the internal spacing.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/[email protected]/components/toast-item/toast-item.js';
After installing Web Awesome via npm, import this component:
import '@awesome.me/webawesome/dist/components/toast-item/toast-item.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/toast-item/toast-item.js';
To import this component for React 18 or below, use the following code:
import WaToastItem from '@awesome.me/webawesome/dist/react/toast-item/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The toast item's message content. |
icon
|
An optional icon to show at the start of the toast item. |
Attributes & Properties
Learn more about attributes and properties.
| Name | Description | Reflects |
|---|---|---|
durationduration |
The length of time in milliseconds before the toast item is automatically dismissed. Set to 0 to keep the toast
item open until the user dismisses it.
Type
number
Default
5000
|
|
sizesize |
The toast item's size.
Type
'xs' | 's' | 'm' | 'l' | 'xl' | 'small' | 'medium' | 'large'
Default
'm'
|
|
variantvariant |
The toast item's variant.
Type
'brand' | 'success' | 'warning' | 'danger' | 'neutral'
Default
'neutral'
|
|
withIconwith-icon |
Only required for SSR. Set to
true if you're slotting in an icon element so the server-rendered markup
includes the icon before the component hydrates on the client.
Type
boolean
Default
false
|
Methods
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
hide() |
Hides the toast item with animation and removes it from the DOM. |
Events
Learn more about events.
| Name | Description |
|---|---|
wa-after-hide |
Emitted after the toast item has finished hiding. |
wa-after-show |
Emitted after the toast item has finished showing. |
wa-hide |
Emitted when the toast item begins to hide. |
wa-show |
Emitted when the toast item begins to show. |
CSS Custom Properties
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--accent-width |
The width of the accent line. Defaults to 4px.
|
--hide-duration |
The animation duration when hiding.
Default
var(--wa-transition-normal)
|
--padding |
The internal spacing of the toast item. Scales with the
size attribute. |
--show-duration |
The animation duration when showing.
Default
var(--wa-transition-normal)
|
CSS Parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
accent |
The colored accent line on the start side. |
::part(accent)
|
close-button |
The close button element. |
::part(close-button)
|
close-icon |
The close icon element. |
::part(close-icon)
|
close-icon__svg |
The close icon's exported svg part. |
::part(close-icon__svg)
|
content |
The message content container. |
::part(content)
|
icon |
The icon container. |
::part(icon)
|
progress-ring |
The progress ring component. |
::part(progress-ring)
|
progress-ring__base |
The progress ring's exported base part. |
::part(progress-ring__base)
|
progress-ring__indicator |
The progress ring's exported indicator part. |
::part(progress-ring__indicator)
|
progress-ring__label |
The progress ring's exported label part. |
::part(progress-ring__label)
|
progress-ring__track |
The progress ring's exported track part. |
::part(progress-ring__track)
|
toast-item |
The toast item's main container. |
::part(toast-item)
|
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.