UI: Dialog

A modal dialog with a title, content and a row of actions. Import the token file once (@pithyx/ui/tokens.css) and wrap the app in UiProvider; see @pithyx/ui.

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

Interfaces

DialogProps

The props of Dialog: React Aria’s modal props plus title, content and actions.

Extends

• Omit<ModalOverlayProps, "className" | "children">

Properties

title

title: ReactNode;

The heading, also the dialog’s accessible name.

icon?

optional icon?: ReactNode;

An icon before the title.

tone?

optional tone?: "danger" | "default";

danger for a destructive question; default when left out.

role?

optional role?: "dialog" | "alertdialog";

alertdialog for a question that interrupts the user; dialog when left out.

size?

optional size?: "medium" | "default" | "large";

medium for longer forms such as a user with its rights; large for side-by-side content (the pool wizard).

children

children: ReactNode;

The content.

actions

actions: ReactNode;

The buttons at the bottom, usually a Button each.

Functions

Dialog()

function Dialog(props): Element;

A modal dialog with a title, content and a row of actions. Open it with isOpen and onOpenChange, or inside a React Aria DialogTrigger; Escape and a press outside close it unless isDismissable is false.

Parameters

Parameter	Type	Description
props	DialogProps	React Aria’s modal overlay props plus title, content and actions.

Returns

Element

The modal overlay with the dialog.

Example

<Dialog
  title="Delete 3 files?"
  tone="danger"
  role="alertdialog"
  isOpen={open}
  onOpenChange={setOpen}
  actions={
    <Button variant="danger" onPress={remove}>
      Delete
    </Button>
  }
>
  They go to the recycle bin.
</Dialog>