Modals

Dialog overlays for focused interactions. Just a card, but centered and given a little more visual attention.

Basic Modal

Confirm Action

Are you sure you want to proceed? This action cannot be undone.

Danger Modal

Delete Item

This will permanently delete the item. This action cannot be undone.

Structure

Make sure to give the toggle the 'active' class when you want to see it

<div class="sw-modal-overlay active">
  <div class="sw-card">
    <h3 class="sw-card-title">Modal Title</h3>
    <p class="sw-card-subtitle">Modal content</p>
    <button class="sw-btn sw-btn-primary sw-btn-sm">Confirm</button>
    <button class="sw-btn sw-btn-secondary sw-btn-sm">Cancel</button>
  </div>
</div>

CSS

Just the overlay. Use sw-card for the modal content.

.sw-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--sw-z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sw-transition-normal), visibility var(--sw-transition-normal);
}

.sw-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}