Dialog

<Dialog>  <DialogTrigger asChild>    <Button variant="outline">Open dialog</Button>  </DialogTrigger>  <DialogContent>    <DialogHeader>      <DialogTitle>Edit profile</DialogTitle>      <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>    </DialogHeader>    <DialogFooter>      <DialogClose asChild>        <Button variant="outline">Cancel</Button>      </DialogClose>      <Button>Save changes</Button>    </DialogFooter>  </DialogContent></Dialog>

Usage

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@reva/ui";

Sheet extends the same Radix primitive but anchors to a side. Use Dialog for centred modal surfaces (forms, confirmations, focused tasks).

Composition

Use the following composition to build a Dialog:

Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    ├── DialogBody
    └── DialogFooter
        ├── DialogClose
        └── (action button)

Examples

Without close button

Pass showCloseButton={false} when the dialog should commit only via explicit actions — e.g. a destructive confirmation.

<Dialog>  <DialogTrigger asChild>    <Button variant="outline">Delete account</Button>  </DialogTrigger>  <DialogContent showCloseButton={false}>    <DialogHeader>      <DialogTitle>Delete account</DialogTitle>      <DialogDescription>This action cannot be undone. Your data will be permanently removed.</DialogDescription>    </DialogHeader>    <DialogFooter>      <DialogClose asChild>        <Button variant="outline">Cancel</Button>      </DialogClose>      <Button variant="destructive">Delete</Button>    </DialogFooter>  </DialogContent></Dialog>

With form

Compose Field primitives inside DialogBody for forms. Wire submission on the form element so Enter and the submit button both close the dialog.

<Dialog>  <DialogTrigger asChild>    <Button variant="outline">Edit profile</Button>  </DialogTrigger>  <DialogContent>    <DialogHeader>      <DialogTitle>Edit profile</DialogTitle>      <DialogDescription>Update your details and save when you are done.</DialogDescription>    </DialogHeader>    <DialogBody>      <FieldGroup>        <Field>          <FieldLabel htmlFor="dialog-form-name">Name</FieldLabel>          <Input id="dialog-form-name" defaultValue="Ada Lovelace" />        </Field>        <Field>          <FieldLabel htmlFor="dialog-form-email">Email</FieldLabel>          <Input id="dialog-form-email" type="email" defaultValue="ada@reva.test" />        </Field>      </FieldGroup>    </DialogBody>    <DialogFooter>      <DialogClose asChild>        <Button variant="outline">Cancel</Button>      </DialogClose>      <Button>Save changes</Button>    </DialogFooter>  </DialogContent></Dialog>

Scrollable body

When DialogBody content exceeds the available height, the body scrolls while DialogHeader and DialogFooter stay pinned — no extra props needed.

<Dialog>  <DialogTrigger asChild>    <Button variant="outline">Read terms</Button>  </DialogTrigger>  <DialogContent>    <DialogHeader>      <DialogTitle>Terms of service</DialogTitle>      <DialogDescription>Please review the terms before continuing.</DialogDescription>    </DialogHeader>    <DialogBody>      <VStack gap="4">        <Text size="sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>        <Text size="sm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</Text>        <Text size="sm">Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</Text>        <Text size="sm">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</Text>        <Text size="sm">Nisi ut aliquid ex ea commodi consequatur, quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</Text>        <Text size="sm">Deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</Text>        <Text size="sm">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint.</Text>        <Text size="sm">Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Curabitur pretium tincidunt lacus, nulla gravida orci a odio, nullam varius, turpis et commodo pharetra, est eros bibendum elit.</Text>        <Text size="sm">Nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec ligula nisi, posuere et, condimentum eget, gravida nec, ipsum. Nam dictum, eros sit amet luctus consectetuer, dolor diam aliquam ligula.</Text>        <Text size="sm">Eget tincidunt elit nibh quis dolor. Mauris ut leo non turpis ornare sodales. Donec dictum tristique justo, in iaculis enim sodales eu. Vivamus nec nibh nec velit pretium auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</Text>        <Text size="sm">Aliquam et lectus sit amet enim cursus aliquam. Suspendisse pulvinar fermentum dui, eu rhoncus est tempor at. Phasellus et risus eu velit lobortis lacinia. Aenean ut ante eu purus posuere viverra. Curabitur consequat, lectus eget tempor sodales, neque velit malesuada lacus.</Text>        <Text size="sm">Sit amet bibendum mi enim sed sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent vehicula nisl ut neque malesuada, vitae sodales ipsum congue. Nulla facilisi. Cras tempus, magna vel volutpat malesuada, lectus risus iaculis erat.</Text>        <Text size="sm">Eget vehicula ipsum justo a leo. Etiam tristique magna eu lectus dictum, eget rutrum est laoreet. Suspendisse potenti. Cras dignissim, ipsum sed pulvinar elementum, justo ligula scelerisque odio, vel suscipit nibh sapien sit amet velit.</Text>        <Text size="sm">Maecenas tincidunt vehicula erat, in tempor nibh blandit at. Vestibulum hendrerit lobortis ligula, sit amet luctus ipsum dignissim a. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</Text>        <Text size="sm">Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</Text>        <Text size="sm">Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</Text>        <Text size="sm">Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna. Etiam suscipit, mauris in pellentesque hendrerit, est nulla congue lectus, vitae mattis dolor justo a urna.</Text>        <Text size="sm">Phasellus laoreet vehicula nibh, ac suscipit lectus rhoncus quis. Donec sed tincidunt purus. Maecenas placerat, nisi quis lacinia tristique, ipsum ligula tincidunt felis, et hendrerit lectus orci a tortor. Quisque tristique aliquet eros, eu condimentum velit dignissim ac.</Text>        <Text size="sm">Curabitur ut suscipit dolor, in mollis nibh. Vestibulum ante ipsum primis in faucibus orci primis luctus et ultrices posuere cubilia curae. Cras non lacus eget eros pharetra cursus. Sed commodo orci ut tellus rhoncus, sit amet venenatis tortor scelerisque.</Text>        <Text size="sm">Vivamus quis odio non eros mattis pharetra. Nullam blandit ligula vitae ipsum elementum, in malesuada justo varius. In hac habitasse platea dictumst. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan pede odio in elit.</Text>      </VStack>    </DialogBody>    <DialogFooter>      <DialogClose asChild>        <Button variant="outline">Cancel</Button>      </DialogClose>      <Button>Accept</Button>    </DialogFooter>  </DialogContent></Dialog>

Fullscreen

Set fullscreen on DialogContent to render the dialog edge-to-edge across the viewport. The default CloseButton stays pinned in the corner.

<Dialog>  <DialogTrigger asChild>    <Button variant="outline">Reset password</Button>  </DialogTrigger>  <DialogContent fullscreen>    <DialogTitle className="sr-only">Forgot password</DialogTitle>    <Flex align="center" justify="center" className="h-full px-4">      <VStack gap="6" className="w-full max-w-sm">        <VStack gap="2">          <Heading size="3xl">Forgot password</Heading>          <Text className="text-fg-muted">Enter your email address and we will send you a link to reset your password.</Text>        </VStack>        <Field>          <FieldLabel htmlFor="reset-password-email">Email</FieldLabel>          <Input id="reset-password-email" type="email" placeholder="Enter your email address" />        </Field>        <Button>Send reset link</Button>      </VStack>    </Flex>  </DialogContent></Dialog>

When fullscreen is true, prefer composing your own layout (e.g. a flex-centred form) rather than using the default DialogHeader / DialogBody / DialogFooter slots. The slot padding is tuned for a centred card surface and looks cramped at viewport width. The slots still work — useful for fullscreen wizards or takeovers with chrome — but you'll likely want to override their className to widen the gutters. DialogContent also exposes data-fullscreen on the rendered element for descendant-CSS targeting when you need fullscreen-specific styling.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state on `Dialog` root.
`defaultOpen`	`boolean`	—	Initial uncontrolled open state on `Dialog` root.
`onOpenChange`	`(open: boolean) => void`	—	Fires when the open state changes.
`modal`	`boolean`	`true`	Whether the dialog blocks interaction with the page.
`showCloseButton`	`boolean`	`true`	Render the corner `CloseButton` on `DialogContent`.
`fullscreen`	`boolean`	`false`	When `true`, `DialogContent` fills the viewport (no max-width, no rounded corners, no shadow).

Dialog

On this page