• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Toast

Component status
Contribution
Last releasedJune 16, 2022
Current version@spectrum-css/toast@7.0.10
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Migration Guide

Clear button replaced by Close button

Replace spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--sizeM with spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite and remove the <div class="spectrum-ClearButton-fill"> element.

Over background replaced by Static White with Outline

Replace all .spectrum-Button--overBackground .spectrum-Button--quiet with .spectrum-Button--staticWhite .spectrum-Button--outline.

Default

Button.xd has been archived
Show markup
<div class="spectrum-Toast">
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">Button.xd has been archived</div>
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary">
      <span class="spectrum-Button-label">Undo</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Info

The toast is done
Show markup
<div class="spectrum-Toast spectrum-Toast--info">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Info" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">The toast is done</div>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Negative

The toast is on fire
Show markup
<div class="spectrum-Toast spectrum-Toast--negative">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">The toast is on fire</div>
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Positive

The toast is golden brown
Show markup
<div class="spectrum-Toast spectrum-Toast--positive">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">The toast is golden brown</div>
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Wrapping

A new version of Lightroom Classic is now available


A new version of Lightroom Classic is now available


A new version of Lightroom Classic is now available


An update is available
Show markup

<div class="spectrum-Toast spectrum-Toast--info">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Info" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">
      A new version of Lightroom Classic is now available
    </div>
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary">
      <span class="spectrum-Button-label">Update</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

<br><br>

<div class="spectrum-Toast spectrum-Toast--info" style="width: 318px;">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Info" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">
      A new version of Lightroom Classic is now available
    </div>
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary">
      <span class="spectrum-Button-label">Update</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

<br><br>

<div class="spectrum-Toast spectrum-Toast--info" style="width: 332px;">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Info" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">
      A new version of Lightroom Classic is now available
    </div>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

<br><br>

<div class="spectrum-Toast spectrum-Toast--info">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Info" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">An update is available</div>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Error

Use negative variant instead

The toast is on fire
Show markup
<div class="spectrum-Toast spectrum-Toast--error">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">The toast is on fire</div>
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Warning

Use negative variant instead

The toast is on fire
Show markup
<div class="spectrum-Toast spectrum-Toast--warning">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">The toast is on fire</div>
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Success

Use positive variant instead

The toast is golden brown
Show markup
<div class="spectrum-Toast spectrum-Toast--success">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">The toast is golden brown</div>
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

No results found

Try another search term.