Dialog - rafty/ui Docs

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

This component is made on top of Radix UIs Dialog Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible. If you need to apply your own styling you can use the isBarebone (to remove styling from entire component and its subcomponents) or isUnstyled (to remove styling from a particular subcomponent).

Anatomy

Import all parts and piece them together.

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

<Dialog>
  <DialogTrigger />
  <DialogOverlay />
  <DialogContent>
    <DialogHeader>
      <DialogTitle />
    </DialogHeader>
    <DialogDescription />
    <DialogFooter />
  </DialogContent>
</Dialog>;

Usage

<Dialog>
  <DialogTrigger>
    open
  </DialogTrigger>
  <DialogOverlay />
  <DialogContent>
    <DialogHeader>
      Dialog Header
    </DialogHeader>
    <DialogDescription>
      Make changes to your profile here. Click save when you're done.
    </DialogDescription>
    <div className="flex items-center justify-end pt-5">
      <Button>
        Save Change
      </Button>
    </div>
  </DialogContent>
</Dialog>

Sizes

There are 4 size options in dialog component: sm, md (default), lg & xl.

<Dialog size="sm">
  <DialogTrigger>
    open
  </DialogTrigger>
  <DialogOverlay />
  <DialogContent>
    <DialogHeader>
      Dialog Header
    </DialogHeader>
    <DialogDescription>
      Make changes to your profile here. Click save when you're done.
    </DialogDescription>
    <div className="flex items-center justify-end pt-5">
      <Button>
        Save Change
      </Button>
    </div>
  </DialogContent>
</Dialog>

AsChild

Our Button component is forwarded within the Alert Dialog Trigger component, enabling you to utilize all button props in the trigger. Additionally, if you wish to use your own trigger, you can use the asChild prop.

<Dialog size="sm">
  <DialogTrigger asChild>
    <Button variant="ghost">
      Click Me
    </Button>
  </DialogTrigger>
  <DialogOverlay />
  <DialogContent>
    <DialogHeader>
      Dialog Header
    </DialogHeader>
    <DialogDescription>
      Make changes to your profile here. Click save when you're done.
    </DialogDescription>
    <div className="flex items-center justify-end pt-5">
      <Button>
        Save Change
      </Button>
    </div>
  </DialogContent>
</Dialog>

Barebone

Pass isBarebone prop to remove all style in dialog.

<Dialog isBarebone>
  <DialogTrigger className=" dark:hover:bg-secondary-800 hover:bg-secondary-100 rounded-lg p-2 px-6 dark:text-white">
    open
  </DialogTrigger>
  <DialogOverlay className="fixed inset-0 z-50 h-full w-full bg-black/30 dark:bg-black/60" />
  <DialogContent className="dark:bg-secondary-800 dark:text-secondary-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 w-[389px] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-4 shadow-lg duration-200 md:w-[600px]">
    <DialogHeader>
      Dialog Header
    </DialogHeader>
    <DialogDescription>
      Make changes to your profile here. Click save when you're done.
    </DialogDescription>
    <div className="flex items-center justify-end pt-5">
      <Button>
        Save Change
      </Button>
    </div>
  </DialogContent>
</Dialog>

ShowCloseButton

The showCloseButton prop exists in DialogContent subcomponent and it is used to show/hide default close button in dialog. Its default value is true.

<Dialog>
  <DialogTrigger>
    open
  </DialogTrigger>
  <DialogOverlay />
  <DialogContent showCloseButton>
    <DialogHeader>
      Dialog Header
    </DialogHeader>
    <DialogDescription>
      Make changes to your profile here. Click save when you're done.
    </DialogDescription>
    <div className="flex items-center justify-end pt-5">
      <DialogClose asChild>
        <Button>
          Save Change
        </Button>
      </DialogClose>
    </div>
  </DialogContent>
</Dialog>

Unstyled

<Dialog>
  <DialogTrigger
    className=" dark:hover:bg-secondary-800 hover:bg-secondary-100 rounded-lg  p-2 px-4"
    isUnstyled
  >
    open
  </DialogTrigger>
  <DialogOverlay />
  <DialogContent>
    <DialogHeader>
      Dialog Header
    </DialogHeader>
    <DialogDescription>
      Make changes to your profile here. Click save when you're done.
    </DialogDescription>
    <div className="flex items-center justify-end pt-5">
      <Button>
        Save Change
      </Button>
    </div>
  </DialogContent>
</Dialog>

API

Root

Property	Description	Type	Default
isBarebone	Removes style from whole component	`boolean`	false

Trigger

DialogTriggercomposes Button component

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`

Overlay

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`

Content

Property	Description	Type	Default
showCloseButton	show default dialog close button	`boolean`	true
isUnstyled	Removes style from component	`boolean`	false

Close

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

Title

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

Descriptiom

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false