DialogDismiss

Client island that closes the modal <dialog> it renders inside on a backdrop press or a followed link.

View code

tsx

<Button commandfor="menu" command="show-modal">Menu</Button>

<Dialog id="menu" aria-labelledby="menu-title">
	<Dialog.Header>
		<Dialog.Title id="menu-title">Menu</Dialog.Title>
	</Dialog.Header>
	<nav>
		<Link href="#features">Features</Link>
		<Link href="#pricing">Pricing</Link>
		<Link href="#faq">FAQ</Link>
	</nav>
	<Dialog.Close commandfor="menu" aria-label="Close" />
	<DialogDismiss />
</Dialog>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Or copy it into your project to edit it:

Terminal

sdxc ui add dialog-dismiss

Usage

typescript

import { DialogDismiss } from "@sdxc/ui";

Renders a hidden marker carrying dialogDismiss. The island loads from the bare @sdxc/ui/dialog-dismiss specifier, which the app's browser entry maps to a dynamic import. A page restored from the back-forward cache returns with the dialog closed.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.