• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Toast

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/toast@4.0.0-alpha.1
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Default
Verified

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--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Undo</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-Cross100 focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Info
Verified

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-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-Cross100 focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Negative
Verified

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--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-Cross100 focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Positive
Verified

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--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-Cross100 focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Wrapping
Verified

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--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Update</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="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--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Update</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="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-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="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-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-Cross100 focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Error
Contribution

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--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-Cross100 focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Warning
Deprecated

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--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-Cross100 focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Success
Contribution

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--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-Cross100 focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>
  </div>
</div>

Old markup
Deprecated

The old markup for Toast (no .spectrum-Toast-body and both buttons inside of .spectrum-Toast-buttons) still works, but will be removed in the next major version.

Button.xd has been archived


Don't use this markup, it's deprecated
Show markup
<div class="spectrum-Toast">
  <div class="spectrum-Toast-content">Button.xd has been archived</div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Undo</span>
    </button>
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="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-content">Don't use this markup, it's deprecated</div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Ok</span>
    </button>
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="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.