Overview

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

Preview

Code

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

export function Demo() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>
          Open
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete your account
            and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

About

This component is an expansion of the Dialog developed and maintained by Radix UI.

Unlike a Toast, the Dialog interrupts the user experience, adding a new step to their navigation journey. It can be used to confirm important actions or to present additional information to the current context.

The Dialog can be triggered from 5 different positions. Clicking outside of it will close it.

Installation

pnpm

pnpm add @inpulse-ui/dialog

bun

bun add @inpulse-ui/dialog

yarn

yarn add @inpulse-ui/dialog

npm

npm install @inpulse-ui/dialog

API Reference

Root

Contains all parts of a Dialog.

Prop	Type	Default Value	Required
defaultOpen	boolean	-	No
open	boolean	-	No
onOpenChange	function	-	No

Trigger

Responsible for opening the Dialog.

Prop	Type	Default Value	Required
asChild	boolean	-	No

Attribute	Value
[data-state]	"open" | "closed"

Content

Abraça todo o conteúdo exibido pelo Dialog.

Prop	Type	Default Value	Required
asChild	boolean	-	No
onOpenAutoFocus	function	-	No
onCloseAutoFocus	function	-	No
onEscapeKeyDown	function	-	No
onPointerDownOutside	function	-	No
onInteractOutside	function	-	No
position	string	center	No

Attribute	Value
[data-state]	"open" | "closed"

Close

Responsible for closing the Dialog.

Prop	Type	Default Value	Required
asChild	boolean	-	No

Title

A title that is announced in an accessible way when a Dialog is opened. If you want to hide the title, wrap it with a <VisuallyHidden asChild>.

Prop	Type	Default Value	Required
asChild	boolean	-	No

Description

A description that is announced in an accessible way when a Dialog is opened.

Prop	Type	Default Value	Required
asChild	boolean	-	No

Usage

Wrap all subcomponents within the Dialog component. The DialogTrigger is the trigger that opens the Dialog, while the DialogContent contains all the content of the Dialog. The DialogHeader is optional and can contain a title and a description.

<Dialog>
  <DialogTrigger>
    Open
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>
        Lorem ipsum
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Examples

Center

This is the default Dialog position.

Preview

Code

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

export function Demo() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>
          Open
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete your account
            and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

Aligned to the corners of the screen

You can ask the Dialog to appear from one of the four corners of the screen using the position property that must be applied to the DialogContent subcomponent. Possible values ​​are: top, right, bottom and left.

Preview

Code

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

export function Demo() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>
          Open
        </Button>
      </DialogTrigger>
      <DialogContent position="left">
        <DialogHeader>
          <DialogTitle>Are you absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete your account
            and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

Scrollable content

The Dialog that comes from the sides will automatically enable scrolling if the content exceeds the height of the device. Note that Dialog with position value center, top or bottom is not intended to have long extensions of content and therefore does not have scroll by default.

Preview

Code

import { Button } from "@inpulse-ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogOverlay,
  DialogTitle,
  DialogTrigger,
} from "@inpulse-ui/dialog";

export function Demo() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>
          Open
        </Button>
      </DialogTrigger>
      <DialogContent position="right">
        <DialogHeader>
          <DialogTitle>Scrollable content inside</DialogTitle>
          <DialogDescription>
            Lorem ipsum....
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

Closing programmatically

Use props to close the Dialog programmatically. For example, after completing an asynchronous action.

Preview

Code

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

const wait = () => new Promise((resolve) => setTimeout(resolve, 2000));

export function Demo() {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  const handler = async () => {
    setLoading(true);
    await wait();
    setOpen(false);
    setLoading(false);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>
          Open
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Close after 2 seconds?</DialogTitle>
          <DialogDescription>
            Be sure that's what you want. This Dialog will close in 2 seconds after pressing the button below. Be warned.
            <Button className="mt-2" loading={loading} onClick={handler}>
              Start closing
            </Button>
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}