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

In-line alert

Component status
Contribution
Current version@spectrum-css/inlinealert@8.1.2
ReleasedAugust 29, 2024
S2-foundations@spectrum-css/inlinealert@9.0.0-s2-foundations.12
ReleasedAugust 2, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Neutral
Contribution

Neutral in-line alert header
This is an alert.
Show markup
<div class="spectrum-InLineAlert">
  <div class="spectrum-InLineAlert-header">Neutral in-line alert header</div>
  <div class="spectrum-InLineAlert-content">This is an alert.</div>
</div>

Informative
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_Info_18_S.svg icon in the Express workflow icon set.

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

Positive
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_CheckmarkCircle_18_S.svg icon in the Express workflow icon set.

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

Notice
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set.

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

Negative
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set.

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

Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set.

Incorrect Payment Information - Error
This is an alert.
Show markup
<div class="spectrum-InLineAlert spectrum-InLineAlert--negative">
  <div class="spectrum-InLineAlert-header">Incorrect Payment Information - 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>
  <div class="spectrum-InLineAlert-content">This is an alert.</div>
  <div class="spectrum-InLineAlert-footer">
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary"><span class="spectrum-Button-label">Ok</span></button>
  </div>
</div>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.