Dialog: No close button

Without a button the dialog still closes with Esc, a click outside, or a swipe down on phones.

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export function DialogNoCloseButton() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>
        No close button
      </DialogTrigger>
      <DialogContent showCloseButton={false}>
        <DialogHeader>
          <DialogTitle>No close button</DialogTitle>
          <DialogDescription>
            Close it with Esc, by clicking outside, or by swiping down on a
            phone.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  )
}

Add this example

This adds the example as components/examples/dialog/no-close-button.tsx, together with the Dialog component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/dialog-no-close-button.json

To add only the component, follow the Dialog installation.

Props in this example

The Dialog props this example sets, from the API reference.

DialogTrigger

Prop	Type	Default
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

DialogContent

Prop	Type	Default
`showCloseButton`Shows the close button in the corner.	`boolean`	`true`

Every prop is in the Dialog API reference.

More Dialog examples

See them all, with keyboard support and accessibility notes, on the Dialog page.