Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

@react.component
let make = () =>
  <Dialog>

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Dialog
Copy

Usage

Copy<Dialog>
  <Dialog.Trigger render={<Button variant=Outline />}>
    {"Open"->React.string}
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title> {"Are you absolutely sure?"->React.string} </Dialog.Title>
      <Dialog.Description>
        {"This action cannot be undone."->React.string}
      </Dialog.Description>
    </Dialog.Header>
  </Dialog.Content>
</Dialog>

Examples

Custom Close Button

Replace the default close control with your own button.

@react.component
let make = () =>
  <Dialog>

No Close Button

Use showCloseButton={false} to hide the close button.

@react.component
let make = () =>
  <Dialog>

Sticky Footer

Keep actions visible while the content scrolls.

@react.component
let make = () =>
  <Dialog>

Scrollable Content

Long content can scroll while the header stays in view.

@react.component
let make = () =>
  <Dialog>

API Reference

See the Base UI documentation for more information.