Dialog

A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision.

Third Party Library

This component uses at least one third party library under the hood. Refer to the library's documentation below for more information on the API.

API Documentation

Import

import { Dialog } from "@aeonkit/react";

Usage

Default

Preview

Open Dialog

Code

<Button variant="solid" rounded onClick={() => setOpen(true)}>
  <LuAlertOctagon className="text-slate-50" /> Open Dialog
</Button>
<Dialog open={open} onOpenChange={(o) => setOpen(o)}>
  <Dialog.Overlay />
  <Dialog.Content>
    <Dialog.Header
      title="Hashtag Jawn Austin"
      closeIcon={<Dialog.Close className="justify-end" />}
    />
    <Dialog.Body>
      I'm baby ugh actually chicharrones venmo, yes plz leggings godard. Tilde
      fingerstache chillwave, roof party brunch knausgaard godard pork belly
      asymmetrical subway tile mustache hoodie meh taxidermy. Normcore vinyl
      williamsburg blue bottle mumblecore.
    </Dialog.Body>
    <Dialog.Footer>
      <Button variant="link" onClick={() => setOpen(false)}>
        Close
      </Button>
      <Button onClick={() => setOpen(false)}>Save</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog>

Props

Dialog

API Interface: DialogProps

Dialog.Close

API Interface: DialogCloseProps

Dialog.Content

API Interface: DialogContentProps

Dialog.Header

title

string

The title of the dialog.

closeIcon?

ReactNode

The close button.

API Interface: DialogHeaderProps

Dialog.Overlay

API Interface: DialogOverlayProps

Dialog.Body

API Interface: DialogBodyProps

Dialog.Footer

API Interface: DialogFooterProps