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

In-Line Alert

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/inlinealert@2.0.0-alpha.0
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Info
Contribution

Information in-line alert header
This is an alert.
Show markup
<div class="spectrum-InLineAlert spectrum-InLineAlert--info">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Info" />
  </svg>
  <div class="spectrum-InLineAlert-header">Information in-line alert header</div>
  <div class="spectrum-InLineAlert-content">This is an alert.</div>
</div>

Success
Contribution

Successful in-line alert header
This is an alert.
Show markup
<div class="spectrum-InLineAlert spectrum-InLineAlert--success">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
  </svg>
  <div class="spectrum-InLineAlert-header">Successful in-line alert header</div>
  <div class="spectrum-InLineAlert-content">This is an alert.</div>
</div>

Negative
Contribution

negative in-line alert header
This is an alert.
Show markup
<div class="spectrum-InLineAlert spectrum-InLineAlert--negative">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <div class="spectrum-InLineAlert-header">negative in-line alert header</div>
  <div class="spectrum-InLineAlert-content">This is an alert.</div>
</div>

Help
Contribution

Information in-line alert header
This is an alert.
Show markup
<div class="spectrum-InLineAlert spectrum-InLineAlert--help">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Help" />
  </svg>
  <div class="spectrum-InLineAlert-header">Information in-line alert header</div>
  <div class="spectrum-InLineAlert-content">This is an alert.</div>
</div>

Error
Contribution

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

Closable
Contribution

An in-line alert with a close button in the footer. Combine this strategy with any variant.

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

No results found

Try another search term.