• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express
Component status
Current version@spectrum-css/modal@5.1.1
ReleasedMay 22, 2024

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.