Toast Item

<cs-toast-item>

Stable

Since 0.1

Toast items are individual notifications displayed within a toast container.

This is how a toast item looks!

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

Now Available in Cornerstone Core
Toast Item moved over from Pro in 3.11.0. On an earlier Core version? Upgrade to use it.

Toast items are meant to live inside a <cs-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.

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

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

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

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

  <cs-toast-item variant="warning" duration="0">
    <cs-icon slot="icon" name="error" variant="fill"></cs-icon>
    Warning variant
  </cs-toast-item>

  <cs-toast-item variant="danger" duration="0">
    <cs-icon slot="icon" name="warning" variant="fill"></cs-icon>
    Danger variant
  </cs-toast-item>
</div>

Size

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

  
    Extra Small
  
    Small
  
    Medium (default)
  
    Large
  
    Extra Large

<div class="cs-stack">
  <cs-toast-item size="xs" duration="0">
    <cs-icon slot="icon" name="set_meal"></cs-icon>
    Extra Small
  </cs-toast-item>

  <cs-toast-item size="s" duration="0">
    <cs-icon slot="icon" name="mouse"></cs-icon>
    Small
  </cs-toast-item>

  <cs-toast-item size="m" duration="0">
    <cs-icon slot="icon" name="pets"></cs-icon>
    Medium (default)
  </cs-toast-item>

  <cs-toast-item size="l" duration="0">
    <cs-icon slot="icon" name="pets"></cs-icon>
    Large
  </cs-toast-item>

  <cs-toast-item size="xl" duration="0">
    <cs-icon slot="icon" name="pets" variant="fill"></cs-icon>
    Extra Large
  </cs-toast-item>
</div>

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.

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

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

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

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

Toast items work fine without icons too.

A simple notification without an icon.

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

Providing Content

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="cs-stack">
  <cs-toast-item variant="brand" duration="0">
    <cs-icon slot="icon" name="notifications"></cs-icon>
    <strong>New message from Alex</strong><br />
    Hey, are you available for a quick call?
  </cs-toast-item>

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

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

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.

<cs-toast-item variant="brand" duration="5000">...</cs-toast-item>
<cs-toast-item variant="brand" duration="10000">...</cs-toast-item>
<cs-toast-item variant="brand" duration="0">...</cs-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.

Click the close button on the right to dismiss →

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

Customizing the Accent

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="cs-stack">
  <cs-toast-item variant="brand" duration="0" style="--accent-width: 8px;">
    <cs-icon slot="icon" name="star" variant="fill"></cs-icon>
    Thicker accent line
  </cs-toast-item>

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

Customizing the Padding

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

  
    Compact padding
  
    Spacious padding

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

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

API

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.

npm

Self-Hosted

React

import '@cruglobal/cornerstone-components/components/toast-item/toast-item.js';

import './cornerstone/components/toast-item/toast-item.js';

import CsToastItem from '@cruglobal/cornerstone-components/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.

Property	Attribute	Description	Type	Default	Reflects
`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.	`number`	`5000`	—
`size`	`size`	The toast item's size.	`'xs' \| 's' \| 'm' \| 'l' \| 'xl'`	`'m'`	Yes
`ssrIcon`	`ssr-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.	`boolean`	`false`	—
`variant`	`variant`	The toast item's variant.	`'brand' \| 'highlight' \| 'information' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'neutral'`	Yes

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
`cs-after-hide`	Emitted after the toast item has finished hiding.
`cs-after-show`	Emitted after the toast item has finished showing.
`cs-hide`	Emitted when the toast item begins to hide.
`cs-show`	Emitted when the toast item begins to show.

CSS Custom Properties

Learn more about CSS custom properties.

Name	Description	Default
`--accent-width`	The width of the accent line. Defaults to 4px.	—
`--hide-duration`	The animation duration when hiding.	`var(--cs-transition-normal)`
`--padding`	The internal spacing of the toast item. Scales with the `size` attribute.	—
`--show-duration`	The animation duration when showing.	`var(--cs-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__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__progress-ring`	The progress ring's exported `progress-ring` part.	`::part(progress-ring__progress-ring)`
`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, are included in this list.

Quick Links

Recent Searches