Modal

Dialogs can be modal or non-modal; .modal uses the modal form.

Default

Apply .modal to native dialog. The static preview needs no script; applications use the native dialog API.

<button class="btn btn-primary btn-solid" type="button" data-modal-target="#defaultModal">
	Open modal
</button>

<dialog class="modal" id="defaultModal" aria-labelledby="defaultModalTitle">
	<div class="modal-content">
		<div class="modal-header">
			<h3 class="modal-title" id="defaultModalTitle">Modal title</h3>
			<button
				class="modal-close icon-btn icon-btn-text"
				type="button"
				data-modal-close
				aria-label="Close modal">
				×
			</button>
		</div>

		<div class="modal-body">
			<p class="mb-0">This is a native dialog styled as a modal.</p>
		</div>

		<div class="modal-footer">
			<button class="btn btn-secondary btn-text" type="button" data-modal-close>
				Cancel
			</button>
			<button class="btn btn-primary btn-solid" type="button">Confirm</button>
		</div>
	</div>
</dialog>

Simple modal

Omit footer actions when unnecessary.

<dialog class="modal" id="simpleModal" aria-labelledby="simpleModalTitle">
	<div class="modal-content">
		<div class="modal-header">
			<h3 class="modal-title" id="simpleModalTitle">Simple modal</h3>
			<button
				class="modal-close icon-btn icon-btn-text"
				type="button"
				data-modal-close
				aria-label="Close modal">
				×
			</button>
		</div>

		<div class="modal-body">
			<p class="mb-0">This modal only contains a header and body.</p>
		</div>
	</div>
</dialog>

Long content

Long modal bodies scroll within the viewport.

<dialog class="modal" id="longContentModal" aria-labelledby="longContentModalTitle">
	<div class="modal-content">
		<div class="modal-header">
			<h3 class="modal-title" id="longContentModalTitle">Long content</h3>
			<button
				class="modal-close icon-btn icon-btn-text"
				type="button"
				data-modal-close
				aria-label="Close modal">
				×
			</button>
		</div>

		<div class="modal-body">
			<p>Long content...</p>
		</div>

		<div class="modal-footer">
			<button class="btn btn-secondary btn-text" type="button" data-modal-close>Close</button>
		</div>
	</div>
</dialog>

Sizes

Use .modal-sm, .modal-lg or .modal-xl for width.

<dialog class="modal modal-sm" id="smallModal" aria-labelledby="smallModalTitle">
	<div class="modal-content">
		<div class="modal-header">
			<h3 class="modal-title" id="smallModalTitle">Small modal</h3>
			<!-- Close button -->
		</div>
		<!-- Modal body -->
	</div>
</dialog>

<dialog class="modal modal-lg" id="largeModal" aria-labelledby="largeModalTitle">
	<div class="modal-content">
		<div class="modal-header">
			<h3 class="modal-title" id="largeModalTitle">Large modal</h3>
			<!-- Close button -->
		</div>
		<!-- Modal body -->
	</div>
</dialog>

<dialog class="modal modal-xl" id="extraLargeModal" aria-labelledby="extraLargeModalTitle">
	<div class="modal-content">
		<div class="modal-header">
			<h3 class="modal-title" id="extraLargeModalTitle">Extra large modal</h3>
			<!-- Close button -->
		</div>
		<!-- Modal body -->
	</div>
</dialog>

Behavior

The package ships styles only. Applications call showModal() and close() and manage triggers and dismissal; previews are static.

CSS Variables

Override these variables on the component or an ancestor.

--modal-width: min(32rem, calc(100vw - var(--spacer-4)));
--modal-max-height: calc(100dvh - var(--spacer-4));
--modal-bg-color: var(--bg-surface);
--modal-color: var(--text-color);
--modal-border-width: var(--border-width);
--modal-border-color: var(--border-color);
--modal-border-radius: var(--border-radius);
--modal-header-border-color: var(--modal-border-color);
--modal-footer-border-color: var(--modal-border-color);
--modal-box-shadow: var(--shadow-lg);
--modal-header-padding: var(--spacer-3);
--modal-body-padding: var(--spacer-3);
--modal-footer-padding: var(--spacer-3);
--modal-backdrop-bg-color: rgb(from var(--gray-800) r g b / 0.7);