ResponsiveDialog

Invite form

import { Button, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Field, FieldLabel, Input, ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogTrigger } from '@rookcom/monarch-react';

<ResponsiveDialog>
  <ResponsiveDialogTrigger asChild>
    <Button>Invite people</Button>
  </ResponsiveDialogTrigger>
  <ResponsiveDialogContent closeOnOutsideClick={false}>
    <DialogHeader>
      <DialogTitle>Invite people</DialogTitle>
      <DialogDescription>They get an email with a link to join.</DialogDescription>
    </DialogHeader>
    <DialogBody>
      <Field>
        <FieldLabel>Email address</FieldLabel>
        <Input type="email" placeholder="[email protected]" />
      </Field>
    </DialogBody>
    <DialogFooter>
      <ResponsiveDialogClose asChild>
        <Button>Cancel</Button>
      </ResponsiveDialogClose>
      <Button variant="primary">Send invite</Button>
    </DialogFooter>
  </ResponsiveDialogContent>
</ResponsiveDialog>

Usage examples

The example at the top of the page is the only one for this component.

Purpose

One dialog that suits both screens: centred with a margin on desktop, rising from the bottom edge on a phone where the thumb can reach its actions. Same content, same focus trap, same Escape.

Use when

A short form or picker used on both desktop and phones.
Public or mobile-first pages where a centred dialog feels cramped on a phone.

Avoid when

Desktop-only admin screens: use Dialog.
A panel that should always come from a side: use Sheet.
A confirmation: use ConfirmDialog.

Design principles

One API and one DOM for both layouts; nothing is rendered twice.
The layout is chosen by a CSS media query, not by matchMedia in JavaScript, so the server render, the first client render and every later render agree: no hydration mismatch and no flash of the wrong layout.
Behaviour never changes with the layout: the same focus trap, Escape, scroll lock and focus return in both.

API reference

import { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogTrigger } from '@rookcom/monarch-react';

Export	Kind	Rendering	Root class
`ResponsiveDialog`	component	client	`.mn-responsive-dialog`
`ResponsiveDialogClose`	component	client	`.mn-responsive-dialog`
`ResponsiveDialogContent`	component	client	`.mn-responsive-dialog`
`ResponsiveDialogTrigger`	component	client	`.mn-responsive-dialog`

ResponsiveDialog, ResponsiveDialogTrigger and ResponsiveDialogClose are Dialog, DialogTrigger and DialogClose.

ResponsiveDialogContent is DialogContent with the mn-responsive-dialog class, sheetBelow and a grab handle.

Compose the content with the Dialog parts: DialogHeader, DialogTitle, DialogDescription, DialogBody and DialogFooter.

Generated from the TypeScript declarations of packages/react/src/components/overlays/responsive-dialog.

Properties

Every DialogContent prop is accepted (size, footer, busy, closeOnOutsideClick, escapeGuard, closeLabel) except fullScreenOnPhone.

size applies to the dialog layout only; the sheet always spans the screen width.