Skip to main content Accessibility Feedback
Skip to Documentation Content

Action Header

The .action-header class creates a layout for displaying headers with an action button inside dismissable elements like modals, drawers, and alerts.

The button padding and margin are adjusted to keep it inline with the heading.

This is a modal heading
<dialog>
	<div class="action-header">
		<h2>This is a modal heading</h2>
		<form>
			<button 
				class="plain" 
				formmethod="dialog" 
				aria-label="Close Modal"
			>
				&#x2715;
			</button>
		</form>
	</div>
	<!-- ... -->
</dialog>