@spectrum-web-components/underlay
Advanced tools
An `<sp-underlay>` provides a visual layer between overlay content and the rest of your application. It is commonly used with modal dialogs and other overlay elements to create a visual separation and prevent interaction with the background content while
An <sp-underlay> provides a visual layer between overlay content and the rest of your application. It is commonly used with modal dialogs and other overlay elements to create a visual separation and prevent interaction with the background content while the overlay is active.
yarn add @spectrum-web-components/underlay
Import the side effectful registration of <sp-underlay> via:
import '@spectrum-web-components/underlay/sp-underlay.js';
When looking to leverage the Underlay base class as a type and/or for extension purposes, do so via:
import { Underlay } from '@spectrum-web-components/underlay';
When using an <sp-underlay> with overlay content, place it as a sibling element before your overlay content.
<style>
sp-underlay:not([open]) + sp-dialog {
display: none;
}
sp-underlay + sp-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: var(--spectrum-gray-100);
}
</style>
<sp-button
onclick="
console.log(this.nextElementSibling);
this.nextElementSibling.open = true;
"
>
Open dialog with underlay element
</sp-button>
<sp-underlay></sp-underlay>
<sp-dialog size="s">
<h1 slot="heading">Hello, I'm an overlay!</h1>
<p>Enjoy your day...</p>
<sp-button
slot="button"
onclick="
this.parentElement.previousElementSibling.open = false;
"
>
Close
</sp-button>
</sp-dialog>
To ensure proper layering of your overlay content with the underlay, use appropriate CSS:
<style>
/* Hide overlay content when underlay is closed */
sp-underlay:not([open]) + sp-dialog {
display: none;
}
/* Position overlay content above the underlay */
sp-underlay + sp-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
</style>
The <sp-underlay> element helps create an accessible modal experience by:
1.6.0 (2025-05-01) — (f2b6a32)
FAQs
An `<sp-underlay>` provides a visual layer between overlay content and the rest of your application. It is commonly used with modal dialogs and other overlay elements to create a visual separation and prevent interaction with the background content while
The npm package @spectrum-web-components/underlay receives a total of 4,402 weekly downloads. As such, @spectrum-web-components/underlay popularity was classified as popular.
We found that @spectrum-web-components/underlay demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.
Research
North Korean threat actors linked to the Contagious Interview campaign return with 35 new malicious npm packages using a stealthy multi-stage malware loader.
Research
Security News
The Socket Research Team investigates a malicious Python typosquat of a popular password library that forces Windows shutdowns when input is incorrect.