• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express
Component status
Last releasedFebruary 26, 2024
Current version@spectrum-css/modal@4.2.5

Usage notes

A modal component that is used primarily by Dialog.


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>

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.