Toast Item

<wa-toast-item>

Since 3.3

Experimental

Pro

Toast-item requires access to Web Awesome Pro

Toast items are individual notifications displayed within a toast container.

Toast items are the individual notifications that appear within a <wa-toast> container. This page documents the toast item's anatomy and styling options.

This is how a toast item looks!

<wa-toast-item variant="brand" duration="0">
  <wa-icon slot="icon" name="bell"></wa-icon>
  This is how a toast item looks!
</wa-toast-item>

Toast items are designed to be used within a <wa-toast> container, which manages their lifecycle and positioning. For usage examples showing how to display notifications, see the Toast documentation.

Examples Jump to heading

Variants Jump to heading

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.

  
    Neutral variant (default)
  
    Brand variant
  
    Success variant
  
    Warning variant
  
    Danger variant

<div class="wa-stack">
  <wa-toast-item variant="neutral" duration="0">
    <wa-icon slot="icon" name="gear"></wa-icon>
    Neutral variant (default)
  </wa-toast-item>

  <wa-toast-item variant="brand" duration="0">
    <wa-icon slot="icon" name="circle-info"></wa-icon>
    Brand variant
  </wa-toast-item>

  <wa-toast-item variant="success" duration="0">
    <wa-icon slot="icon" name="check"></wa-icon>
    Success variant
  </wa-toast-item>

  <wa-toast-item variant="warning" duration="0">
    <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
    Warning variant
  </wa-toast-item>

  <wa-toast-item variant="danger" duration="0">
    <wa-icon slot="icon" name="triangle-exclamation"></wa-icon>
    Danger variant
  </wa-toast-item>
</div>

Sizes Jump to heading

Use the size attribute to change the toast item's size.

  
    Small
  
    Medium (default)
  
    Large

<div class="wa-stack">
  <wa-toast-item size="small" duration="0">
    <wa-icon slot="icon" name="mouse-field"></wa-icon>
    Small
  </wa-toast-item>

  <wa-toast-item size="medium" duration="0">
    <wa-icon slot="icon" name="horse"></wa-icon>
    Medium (default)
  </wa-toast-item>

  <wa-toast-item size="large" duration="0">
    <wa-icon slot="icon" name="elephant"></wa-icon>
    Large
  </wa-toast-item>
</div>

Icons Jump to heading

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.

  
    Your changes have been saved!
  
    You have 3 new messages
  
    Your session will expire soon

<div class="wa-stack">
  <wa-toast-item variant="success" duration="0">
    <wa-icon slot="icon" name="check"></wa-icon>
    Your changes have been saved!
  </wa-toast-item>

  <wa-toast-item variant="brand" duration="0">
    <wa-icon slot="icon" name="envelope"></wa-icon>
    You have 3 new messages
  </wa-toast-item>

  <wa-toast-item variant="warning" duration="0">
    <wa-icon slot="icon" name="clock"></wa-icon>
    Your session will expire soon
  </wa-toast-item>
</div>

Toast items work fine without icons too.

A simple notification without an icon.

<wa-toast-item variant="neutral" duration="0">
  A simple notification without an icon.
</wa-toast-item>

Rich Content Jump to heading

The default slot accepts any HTML content, allowing you to create rich notifications with formatted text, links, and interactive elements.

New message from Alex
Hey, are you available for a quick call?

Upload complete
View file · Share

You've earned a reward!

Claim Now

Later

<div class="wa-stack">
  <wa-toast-item variant="brand" duration="0">
    <wa-icon slot="icon" name="bell"></wa-icon>
    <strong>New message from Alex</strong><br>
    Hey, are you available for a quick call?
  </wa-toast-item>

  <wa-toast-item variant="success" duration="0">
    <wa-icon slot="icon" name="cloud-arrow-up"></wa-icon>
    <strong>Upload complete</strong><br>
    <a href="#">View file</a> · <a href="#">Share</a>
  </wa-toast-item>

  <wa-toast-item variant="brand" duration="0">
    <wa-icon slot="icon" name="gift"></wa-icon>
    You've earned a reward!
    <div style="margin-block-start: var(--wa-space-xs);">
      <wa-button variant="brand" size="small">Claim Now</wa-button>
      <wa-button appearance="filled" size="small">Later</wa-button>
    </div>
  </wa-toast-item>
</div>

Duration Jump to heading

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 Behavior Jump to heading

Toast items automatically pause their countdown timer when the user hovers over them, giving more time to read the content. When the mouse leaves, the timer resets and begins counting down again.

The Close Button Jump to heading

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.

Click the close button on the right to dismiss →

<wa-toast-item variant="neutral" duration="0">
  <wa-icon slot="icon" name="circle-info"></wa-icon>
  Click the close button on the right to dismiss →
</wa-toast-item>

Customizing the Accent Jump to heading

Use the --accent-width custom property to adjust the width of the accent line, or hide it entirely.

  
    Thicker accent line
  
    No accent line

<div class="wa-stack">
  <wa-toast-item variant="brand" duration="0" style="--accent-width: 8px;">
    <wa-icon slot="icon" name="star"></wa-icon>
    Thicker accent line
  </wa-toast-item>

  <wa-toast-item variant="success" duration="0" style="--accent-width: 0;">
    <wa-icon slot="icon" name="check"></wa-icon>
    No accent line
  </wa-toast-item>
</div>

Customizing the Padding Jump to heading

Use the --padding custom property to adjust the internal spacing.

  
    Compact padding
  
    Spacious padding

<div class="wa-stack">
  <wa-toast-item variant="brand" duration="0" style="--padding: var(--wa-space-xs);">
    <wa-icon slot="icon" name="compress"></wa-icon>
    Compact padding
  </wa-toast-item>

  <wa-toast-item variant="brand" duration="0" style="--padding: var(--wa-space-xl);">
    <wa-icon slot="icon" name="expand"></wa-icon>
    Spacious padding
  </wa-toast-item>
</div>

Importing Jump to heading

Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN

npm

React

Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.

To manually import this component from NPM, use the following code.

import '@awesome.me/webawesome/dist/components/toast-item/toast-item.js';

To manually import this component from React, use the following code.

import WaToastItem from '@awesome.me/webawesome/dist/react/toast-item';

Slots Jump to heading

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 Jump to heading

Learn more about attributes and properties.

Name	Description	Reflects
`css`	One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended. Type `CSSResultGroup \| undefined` Default `[styles, variantStyles, sizeStyles]`
`duration` `duration`	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`
`size` `size`	The toast item's size. Type `'small' \| 'medium' \| 'large'` Default `'medium'`
`variant` `variant`	The toast item's variant. Type `'brand' \| 'success' \| 'warning' \| 'danger' \| 'neutral'` Default `'neutral'`
`withIcon` `with-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 Jump to heading

Learn more about methods.

Name	Description	Arguments
`hide()`	Hides the toast item with animation and removes it from the DOM.

Events Jump to heading

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 Jump to heading

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. Defaults to 200ms.
`--show-duration`	The animation duration when showing. Defaults to 200ms.

CSS parts Jump to heading

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 Jump to heading

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Need a hand?

Report a bug

Ask for help

Getting Started

Resources

Using AI with Web Awesome

Frameworks

Components

Data Visualization Pro Data Visualization components require access to Web Awesome Pro

Style Utilities

Layout Utilities

Patterns Pro Patterns require access to Web Awesome Pro

Theming

Design Tokens

Terms & Policies

Web Awesome

Toast Item

Examples Jump to heading

Variants Jump to heading

Sizes Jump to heading

Icons Jump to heading

Rich Content Jump to heading

Duration Jump to heading

Hover Behavior Jump to heading

The Close Button Jump to heading

Customizing the Accent Jump to heading

Customizing the Padding Jump to heading

Importing Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

Methods Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

CSS parts Jump to heading

Dependencies Jump to heading

Getting Started

Resources

Using AI with Web Awesome

Frameworks

Components

Data Visualization Pro Data Visualization components require access to Web Awesome Pro

Style Utilities

Layout Utilities

Patterns Pro Patterns require access to Web Awesome Pro

Theming

Design Tokens

Terms & Policies

Web Awesome

Web Awesome Elsewhere

Toast Item

Examples Jump to heading

Variants Jump to heading

Sizes Jump to heading

Icons Jump to heading

Rich Content Jump to heading

Duration Jump to heading

Hover Behavior Jump to heading

The Close Button Jump to heading

Customizing the Accent Jump to heading

Customizing the Padding Jump to heading

Importing Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

Methods Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

CSS parts Jump to heading

Dependencies Jump to heading

We Have Cookies…