# Modal - **Category:** Overlay (`overlay`) - **Slug:** `overlay/modal` - **Status:** stable - **Platforms:** web - **Import:** `import { Modal } from "@protocore/pds";` - **Docs:** https://pds.protocore.io/components/overlay/modal > Alias of Dialog — a centered, focus-trapping overlay for confirmations, forms, and focused tasks. ## An alias of Dialog **Modal** is the Mantine-familiar name for this library's **Dialog** — the same component under a second name for discoverability. `Modal.Root`, `Modal.Trigger`, `Modal.Content`, `Modal.Title`, `Modal.Description`, `Modal.Close`, and `Modal.Footer` are `Dialog`'s parts re-aliased 1:1. See the [Dialog](/overlay/dialog) page for the full API and accessibility notes. For a destructive confirmation, reach for [AlertDialog](/overlay/alert-dialog) instead. ## Examples ### Basics Compose it exactly like Dialog — a trigger opens a centered content panel with a title, description, and footer actions. ```tsx import { Modal, Button } from "@protocore/pds"; export default function ModalBasics() { return ( Invite operator Invite operator They will receive read-write access to the staging cluster and can rotate signing keys. Cancel Send invite ); } ``` ## Accessibility **Notes** - Identical to Dialog: focus is trapped while open, Escape closes, and the trigger is restored on close (Radix Dialog under the hood). ## Related `dialog`, `alert-dialog`, `drawer` --- © Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/