tarve
Docs GitHub

AlertDialog

A confirmation dialog with cancel and action buttons.

AlertDialogProps packages/core/src/extra-controls.ts:720 ↗

Import

import { AlertDialog } from "@tarve/core";

Usage

AlertDialog.tsx
import { AlertDialog } from "@tarve/core";

let open = true;

<AlertDialog
  open={open}
  title="Delete project?"
  description="This action cannot be undone."
  actionLabel="Delete"
  actionVariant="destructive"
  onAction={() => console.log("deleted")}
  onOpenChange={(next) => {
    open = next;
  }}
/>

Props

PropTypeDefault
open required boolean—
title required string—
actionDisabled boolean—
actionLabel string"Continue"
actionVariant ButtonProps["variant"]"default"
cancelLabel string"Cancel"
closeOnEscape booleanfalse
description string—
onAction () => void—
onCancel () => void—
onOpenChange (open: boolean) => void—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

ButtonProps
interface ButtonProps extends BaseProps {
  variant?: ButtonVariant;
  size?: "sm" | "default" | "lg";
  disabled?: boolean;
  control?: Control;
  onClick?: () => void;
  onHover?: (hovered: boolean) => void;
}