Dialog

PreviousNext

Modal dialog. Prefer controlled open + React children.

import { Dialog, Button } from "@/rl-ui";

<Dialog
title="New item"
description="Fill in the basics."
trigger={<Button variant="primary">Open</Button>}
content={<p>Form fields go here.</p>}
hideFooter
/>

Examples

Variants

import { Dialog, Button } from "@/rl-ui";

<>
<Dialog variant="basic" title="Basic" trigger={<Button>Basic</Button>} content="Body" />
<Dialog variant="success" title="Success" trigger={<Button variant="success">Success</Button>} content="Body" />
<Dialog variant="danger" title="Danger" trigger={<Button variant="danger">Danger</Button>} content="Body" />
</>
import { Dialog, Button } from "@/rl-ui";

<Dialog
title="Confirm"
description="Apply these changes?"
trigger={<Button variant="primary">Open</Button>}
content="Review the summary before continuing."
/>

API

PropTypeDefaultDescription
variant"basic" | "success" | "danger""basic"Header / action tone.
widthnumber512Dialog width in px.
openboolean—Controlled open state.
defaultOpenboolean—Uncontrolled initial open.
onOpenChange(open: boolean) => void—Open change handler.
titleReactNode—Dialog title.
descriptionReactNode—Supporting copy.
contentReactNode—Body content.
triggerReactNode—Element that opens the dialog.
hideFooterbooleanfalseOmit default Cancel / Ok footer.
closablebooleantrueShow close (X) control.
actionPropsButtonProps & { text? }—Primary action button props.
cancelPropsButtonProps & { text? }—Cancel button props.