Modal Component

Modal Component

Axiom01's modal component provides a flexible and accessible way to display dialogs, alerts, or additional content that requires user interaction. Modals overlay the main content, ensuring focus remains on the task at hand.

Basic Modal

Code Example

<div class="modal" id="basic-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-hidden="true">
		<div>
			<header>
				<h3 id="modal-title">Modal Title</h3>
				<button aria-label="Close modal" data-modal-close>&times;</button>
			</header>
			<section>
				<p>Modal content goes here.</p>
			</section>
			<footer>
				<button class="button secondary" data-modal-close>Cancel</button>
				<button class="button primary">Confirm</button>
			</footer>
		</div>
	</div>

Usage Guidelines

The .modal class provides the overlay and centering. The inner <div> contains the modal's actual content. Ensure you include role="dialog", aria-modal="true", and aria-labelledby for accessibility. The aria-hidden attribute should be toggled by JavaScript to control visibility.

The modal structure includes a <header> with a title and close button, a <section> for the main content, and a <footer> for action buttons.