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"
>
✕
</button>
</form>
</div>
<!-- ... -->
</dialog>