• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express
Component status
Contribution
Current version@spectrum-css/modal@5.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/modal@6.0.0-s2-foundations.14
ReleasedSeptember 12, 2024
View repository
GitHub
View package
npm

Usage notes

A modal component that is used primarily by Dialog.

Variants

Modal
Contribution

This is a base component used by other components, and should not be used on its own like the following example. If you need a full-featured modal for displaying content, take a look at the Dialog component instead.

A basic example of the Modal markup.
Show markup
<div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
  <div class="spectrum-Modal is-open">A basic example of the Modal markup.</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.