Modal dialog with portal, background isolation, focus management, and dismissal.
@combric/react · v1.1.1 · Current
import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "@combric/react";
export function Example() {
return <Dialog><DialogTrigger>Open dialog</DialogTrigger><DialogContent><DialogTitle>Confirm change</DialogTitle><DialogDescription>This action updates the project.</DialogDescription><DialogClose>Cancel</DialogClose></DialogContent></Dialog>;
}| Name |
|---|
Dialog |
DialogTrigger |
DialogContent |
DialogTitle |
DialogDescription |
DialogClose |
| Property / capability | Published contract |
|---|---|
| Contract | open/defaultOpen |
| Contract | onOpenChange |
| Contract | container portal target |
Moves focus inside, cycles Tab, isolates background siblings, restores focus, and requires an accessible name.
Tab/Shift+Tab cycle; Escape closes the top active layer and restores trigger focus.
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.