Skip to content
OverlayBrowse overlay components
ComponentsOverlayStable

Modal

Blocking dialog with backdrop blur, spring scale-in animation, 4 sizes.

Live preview

Usage

Adapters:React stableVue stable
index.html
<div class="lm-modal" role="dialog" aria-modal="true" aria-labelledby="title">
  <section class="lm-modal-panel">
    <header class="lm-modal-header"><h2 id="title">Confirm</h2></header>
    <div class="lm-modal-body">…</div>
  </section>
</div>

CSS classes (5)

ClassDescription
lm-modalBackdrop + grid container
lm-modal-panelCentered card
lm-modal-{size}sm | md | lg | xl
lm-modal-header / -body / -footerSlots
lm-modal-titleHeading typography

React props (3)

PropTypeDefaultDescription
openboolean——
sizesm | md | lg | xl——
onOpenChange(open: boolean) => void——

Accessibility

  • Use role='dialog' and aria-modal='true' for blocking overlays.
  • Trap focus inside the overlay; return focus to the trigger on close.
  • Provide aria-labelledby and aria-describedby.
  • Close on Escape and outside-click.

Spotted something wrong? Edit this entry on GitHub.