Dialog

Open a focused panel over the page for forms, details, or confirmations. Dismiss it with Escape or the close control.

tsx

1import { Button } from "@/components/ui/button"2import {3  Dialog,4  DialogClose,5  DialogContent,6  DialogDescription,7  DialogFooter,8  DialogHeader,9  DialogTitle,10  DialogTrigger,11} from "@/components/ui/dialog"12import { Field, FieldGroup } from "@/components/ui/field"13import { Input } from "@/components/ui/input"14import { Label } from "@/components/ui/label"1516export function Example() {17  return (18    <Dialog>19      <form>20        <DialogTrigger render={<Button variant="outline" />}>21          Open Dialog22        </DialogTrigger>23        <DialogContent className="sm:max-w-sm">24          <DialogHeader>25            <DialogTitle>Edit profile</DialogTitle>26            <DialogDescription>27              Make changes to your profile here. Click save when you&apos;re28              done.29            </DialogDescription>30          </DialogHeader>31          <FieldGroup>32            <Field>33              <Label htmlFor="name-1">Name</Label>34              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />35            </Field>36            <Field>37              <Label htmlFor="username-1">Username</Label>38              <Input39                id="username-1"40                name="username"41                defaultValue="@peduarte"42              />43            </Field>44          </FieldGroup>45          <DialogFooter>46            <DialogClose render={<Button variant="outline" />}>47              Cancel48            </DialogClose>49            <Button type="submit">Save changes</Button>50          </DialogFooter>51        </DialogContent>52      </form>53    </Dialog>54  )55}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add dialog

Usage

1import { Button } from "@/components/ui/button"2import {3  Dialog,4  DialogClose,5  DialogContent,6  DialogDescription,7  DialogFooter,8  DialogHeader,9  DialogTitle,10  DialogTrigger,11} from "@/components/ui/dialog"

1<Dialog>2  <DialogTrigger render={<Button variant="outline" />}>3    Edit profile4  </DialogTrigger>5  <DialogContent>6    <DialogHeader>7      <DialogTitle>Edit profile</DialogTitle>8      <DialogDescription>9        Update your name and email for this workspace.10      </DialogDescription>11    </DialogHeader>12  </DialogContent>13</Dialog>

Composition

Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    └── DialogFooter

Custom close button

Replace the default close control with a button in the footer.

tsx

1import { Button } from "@/components/ui/button"2import {3  Dialog,4  DialogClose,5  DialogContent,6  DialogDescription,7  DialogFooter,8  DialogHeader,9  DialogTitle,10  DialogTrigger,11} from "@/components/ui/dialog"12import { Input } from "@/components/ui/input"13import { Label } from "@/components/ui/label"1415export function Example() {16  return (17    <Dialog>18      <DialogTrigger render={<Button variant="outline" />}>19        Share20      </DialogTrigger>21      <DialogContent className="sm:max-w-md">22        <DialogHeader>23          <DialogTitle>Share link</DialogTitle>24          <DialogDescription>25            Anyone who has this link will be able to view this.26          </DialogDescription>27        </DialogHeader>28        <div className="flex items-center gap-2">29          <div className="grid flex-1 gap-2">30            <Label htmlFor="link" className="sr-only">31              Link32            </Label>33            <Input34              id="link"35              defaultValue="https://example.com/share/a1b2c3d4"36              readOnly37            />38          </div>39        </div>40        <DialogFooter className="sm:justify-start">41          <DialogClose render={<Button />}>Close</DialogClose>42        </DialogFooter>43      </DialogContent>44    </Dialog>45  )46}

No close button

Set showCloseButton={false} on DialogContent to hide the default close button.

tsx

1import { Button } from "@/components/ui/button"2import {3  Dialog,4  DialogContent,5  DialogDescription,6  DialogHeader,7  DialogTitle,8  DialogTrigger,9} from "@/components/ui/dialog"1011export function Example() {12  return (13    <Dialog>14      <DialogTrigger render={<Button variant="outline" />}>15        No Close Button16      </DialogTrigger>17      <DialogContent showCloseButton={false}>18        <DialogHeader>19          <DialogTitle>No Close Button</DialogTitle>20          <DialogDescription>21            This dialog doesn&apos;t have a close button in the top-right22            corner.23          </DialogDescription>24        </DialogHeader>25      </DialogContent>26    </Dialog>27  )28}

Sticky footer

Keep actions in view while longer content scrolls.

tsx

1import { Button } from "@/components/ui/button"2import {3  Dialog,4  DialogClose,5  DialogContent,6  DialogDescription,7  DialogFooter,8  DialogHeader,9  DialogTitle,10  DialogTrigger,11} from "@/components/ui/dialog"1213export function Example() {14  return (15    <Dialog>16      <DialogTrigger render={<Button variant="outline" />}>17        Sticky Footer18      </DialogTrigger>19      <DialogContent>20        <DialogHeader>21          <DialogTitle>Sticky Footer</DialogTitle>22          <DialogDescription>23            This dialog has a sticky footer that stays visible while the content24            scrolls.25          </DialogDescription>26        </DialogHeader>27        <div className="-mx-4 max-h-[50vh] overflow-y-auto px-4">28          {Array.from({ length: 10 }).map((_, index) => (29            <p key={index} className="mb-4 leading-normal tracking-wide">30              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do31              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut32              enim ad minim veniam, quis nostrud exercitation ullamco laboris33              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in34              reprehenderit in voluptate velit esse cillum dolore eu fugiat35              nulla pariatur. Excepteur sint occaecat cupidatat non proident,36              sunt in culpa qui officia deserunt mollit anim id est laborum.37            </p>38          ))}39        </div>40        <DialogFooter>41          <DialogClose render={<Button variant="outline" />}>42            Close43          </DialogClose>44        </DialogFooter>45      </DialogContent>46    </Dialog>47  )48}

Scrollable content

Let longer content scroll while the header stays in view.

tsx

1import { Button } from "@/components/ui/button"2import {3  Dialog,4  DialogContent,5  DialogDescription,6  DialogHeader,7  DialogTitle,8  DialogTrigger,9} from "@/components/ui/dialog"1011export function Example() {12  return (13    <Dialog>14      <DialogTrigger render={<Button variant="outline" />}>15        Scrollable Content16      </DialogTrigger>17      <DialogContent>18        <DialogHeader>19          <DialogTitle>Scrollable Content</DialogTitle>20          <DialogDescription>21            This is a dialog with scrollable content.22          </DialogDescription>23        </DialogHeader>24        <div className="-mx-4 max-h-[50vh] overflow-y-auto px-4">25          {Array.from({ length: 10 }).map((_, index) => (26            <p key={index} className="mb-4 leading-normal tracking-wide">27              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do28              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut29              enim ad minim veniam, quis nostrud exercitation ullamco laboris30              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in31              reprehenderit in voluptate velit esse cillum dolore eu fugiat32              nulla pariatur. Excepteur sint occaecat cupidatat non proident,33              sunt in culpa qui officia deserunt mollit anim id est laborum.34            </p>35          ))}36        </div>37      </DialogContent>38    </Dialog>39  )40}

API Reference

Prop	Type	Default
open	boolean	—
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	—
onOpenChangeComplete	(open: boolean) => void	—
modal	boolean \| "trap-focus"	true
disablePointerDismissal	boolean	false

1<Dialog>2  <DialogTrigger render={<Button variant="outline" />}>3    Open4  </DialogTrigger>5  <DialogContent>...</DialogContent>6</Dialog>

DialogTrigger

Renders a native button by default. Pass a Button with the Base UI render prop.

Prop	Type	Default
className	string	—
render	React.ReactElement	—

1<DialogTrigger render={<Button variant="outline" />}>2  Open3</DialogTrigger>

DialogClose

Closes the dialog. Prefer render={<Button … />} so actions match your buttons.

Prop	Type	Default
className	string	—
render	React.ReactElement	—

1<DialogClose render={<Button variant="outline" />}>2  Cancel3</DialogClose>

DialogContent

Centered panel with an overlay and the shared Arctis open animation. A top-right close control is included by default.

Prop	Type	Default
className	string	—
showCloseButton	boolean	true

1<DialogContent className="sm:max-w-md" showCloseButton>2  ...3</DialogContent>

DialogHeader

Prop	Type	Default
className	string	—

1<DialogHeader>2  <DialogTitle>Title</DialogTitle>3  <DialogDescription>Description</DialogDescription>4</DialogHeader>

DialogFooter

Prop	Type	Default
className	string	—
showCloseButton	boolean	false

1<DialogFooter>2  <DialogClose render={<Button variant="outline" />}>3    Cancel4  </DialogClose>5  <Button>Save</Button>6</DialogFooter>

DialogTitle

Prop	Type	Default
className	string	—

1<DialogTitle>Title</DialogTitle>

DialogDescription

Prop	Type	Default
className	string	—

1<DialogDescription>Description</DialogDescription>

DialogPortal

Prop	Type	Default
container	HTMLElement	document.body

DialogOverlay

Scrim behind the panel. Rendered automatically by DialogContent.

Prop	Type	Default
className	string	—