AlertDialog

PreviousNext

Confirm / destructive prompt that requires an explicit action.

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

<AlertDialog
title="Delete project?"
description="This cannot be undone."
variant="danger"
trigger={<Button variant="danger">Delete</Button>}
/>

Examples

Variants

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

<>
<AlertDialog variant="basic" title="Continue?" trigger={<Button>Basic</Button>} />
<AlertDialog variant="success" title="Publish?" trigger={<Button variant="success">Publish</Button>} />
<AlertDialog variant="danger" title="Delete?" trigger={<Button variant="danger">Delete</Button>} />
</>

API

PropTypeDefaultDescription
variant"basic" | "success" | "danger""basic"Tone for the confirm action.
widthnumber512Dialog width in px.
titleReactNode—Prompt title.
descriptionReactNode—Supporting copy.
triggerReactNode—Element that opens the dialog.
openboolean—Controlled open state.
onOpenChange(open: boolean) => void—Open change handler.