Alert

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/alert@2.0.0

Variants#


Info#
Contribution

Information Alert Header
This is an alert.
<div class="spectrum-Alert spectrum-Alert--info">
  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
  <div class="spectrum-Alert-header">Information Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>
Show markup

Success#
Contribution

Successful Alert Header
This is an alert.
<div class="spectrum-Alert spectrum-Alert--success">
  <svg class="spectrum-Icon spectrum-UIIcon-SuccessMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-SuccessMedium" />
  </svg>
  <div class="spectrum-Alert-header">Successful Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>
Show markup

Warning#
Contribution

Warning Alert Header
This is an alert.
<div class="spectrum-Alert spectrum-Alert--warning">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Alert-header">Warning Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>
Show markup

Help#
Contribution

Information Alert Header
This is an alert.
<div class="spectrum-Alert spectrum-Alert--help">
  <svg class="spectrum-Icon spectrum-UIIcon-HelpMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-HelpMedium" />
  </svg>
  <div class="spectrum-Alert-header">Information Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>
Show markup

Error#
Contribution

Error Alert - Oh no
This is an alert.
<div class="spectrum-Alert spectrum-Alert--error">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Alert-header">Error Alert - Oh no</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>
Show markup

Closable#
Contribution

An Alert with a close button in the footer. Combine this strategy with any variant.

Incorrect Payment Information - Error
This is an alert.
<div class="spectrum-Alert spectrum-Alert--error">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Alert-header">Incorrect Payment Information - Error</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
  <div class="spectrum-Alert-footer">
    <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">Close</button>
  </div>
</div>
Show markup