Components · modals
Modals. Native dialog, six layouts.
Built on the native <dialog> element — backdrop, focus-trap, and Escape come free. Six placement + size variants chain animation classes for entrance.
01 · base
.lsd-modal
Click any trigger to open. The native <dialog> traps focus, blocks the page, and closes on Escape automatically.
sizes
sm / md / lg / xl
Width scales — all centered.
<button data-open-modal="modal-sm">
states
Backdrop / Escape / button
Three ways to close — all wired via JS.
dialog.close()
02 · variants
Six layout variants
.lsd-modal--center
Center (default)
Classic centered card. Scales with content.
.lsd-modal--center
.lsd-modal--side-right
Right drawer
Slides in from right edge — full height.
.lsd-modal--side-right
.lsd-modal--side-left
Left drawer
Same as right, opposite edge.
.lsd-modal--side-left
.lsd-modal--bottom-sheet
Bottom sheet
Mobile-first — slides up from bottom edge.
.lsd-modal--bottom-sheet
.lsd-modal--fullscreen
Fullscreen
Takes the whole viewport.
.lsd-modal--fullscreen
.lsd-modal--alert
Alert
Small confirm dialog with centered actions.
.lsd-modal--alert
03 · animations
Entrance chaining
Chain .lsd-fx--* classes on the <dialog> or its panel for entrance choreography.
.lsd-fx--scale-in
Scale-in
.lsd-fx--scale-in
.lsd-fx--slide-up
Slide-up
.lsd-fx--slide-up
.lsd-fx--blur-in
Blur-in
.lsd-fx--blur-in
Components · LSD primitives