Modal
Container for modal dialogs. Use with overlay for backdrop effect.
Default
Modal content goes here
Base
| Class | Description |
|---|---|
.ui-modal | Base class |
Size
| Class | Value |
|---|---|
.ui-modal--sm | sm |
.ui-modal--lg | lg |
.ui-modal--full | full |
.ui-modal--entering | entering |
Visible
| Class | Description |
|---|---|
.ui-modal--visible | visible |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-modal-bg |
var(--ui-color-bg) |
Background color |
--ui-modal-radius |
var(--ui-radius-lg) |
Corner radius |
--ui-modal-shadow |
0 calc(var(--ui-unit) * 3) calc(var(--ui-unit) * 6) rgb(0 0 0 / 0.25) |
Box shadow |
--ui-modal-padding |
calc(var(--ui-unit) * 3) |
Padding on all sides |
--ui-modal-max-width |
calc(var(--ui-unit) * 60) |
Maximum width |
--ui-modal-max-height |
calc(100vh - var(--ui-unit) * 8) |
Maximum height |
--ui-modal-z |
var(--ui-z-index-modal) |
Z-index stacking order |
--ui-modal-max-width-sm |
calc(var(--ui-unit) * 40) |
Maximum width at small size |
--ui-modal-max-width-lg |
calc(var(--ui-unit) * 80) |
Maximum width at large size |
Sizes
Small modal
<div class="demo-area" style="--demo-h: 120px">
<div class="ui-modal ui-modal--sm ui-modal--visible ui-absolute">
<div class="ui-modal__content">
<p>Small modal</p>
</div>
</div>
</div>Large
Large modal
<div class="demo-area" style="--demo-h: 120px">
<div class="ui-modal ui-modal--lg ui-modal--visible ui-absolute">
<div class="ui-modal__content">
<p>Large modal</p>
</div>
</div>
</div>Full
Full-screen modal
<div class="demo-area" style="--demo-h: 120px">
<div class="ui-modal ui-modal--full ui-modal--visible ui-absolute">
<div class="ui-modal__content">
<p>Full-screen modal</p>
</div>
</div>
</div>Entering Animation
Entering modal
<!-- Apply entering modifier for open transition. -->
<div class="demo-area" style="--demo-h: 120px">
<div class="ui-modal ui-modal--visible ui-modal--entering ui-absolute">
<div class="ui-modal__content">
<p>Entering modal</p>
</div>
</div>
</div>With Scrollable Content
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
<div class="demo-area">
<div class="ui-modal ui-modal--visible ui-absolute">
<div class="ui-modal__content" style="max-height: 152px;">
<div class="ui-modal__body">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>
<p>Line 6</p>
</div>
</div>
</div>
</div>