Alert Dialog

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download alert-dialog -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { AlertDialog } from "@/components/ui/alert-dialog";
import { AlertDialogTrigger } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { AlertDialogContent } from "@/components/ui/alert-dialog";
import { AlertDialogHeader } from "@/components/ui/alert-dialog";
import { AlertDialogTitle } from "@/components/ui/alert-dialog";
import { AlertDialogDescription } from "@/components/ui/alert-dialog";
import { AlertDialogFooter } from "@/components/ui/alert-dialog";
import { AlertDialogCancel } from "@/components/ui/alert-dialog";
import { AlertDialogAction } from "@/components/ui/alert-dialog";

const args = {
  "variant": "main",
} satisfies Partial<
  InstanceType<typeof AlertDialogAction> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown> & { variant?: "main" | "destructive" };
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="tertiary"> Show AlertDialog </Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Leaving Page</AlertDialogTitle>
        <AlertDialogDescription>
          You are about to leave this page. Any unsaved changes will be lost. Do
          you wish to proceed?
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction v-bind="args">Continue</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

Examples

Default

<script setup lang="ts">
import { AlertDialog } from "@/components/ui/alert-dialog";
import { AlertDialogTrigger } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { AlertDialogContent } from "@/components/ui/alert-dialog";
import { AlertDialogHeader } from "@/components/ui/alert-dialog";
import { AlertDialogTitle } from "@/components/ui/alert-dialog";
import { AlertDialogDescription } from "@/components/ui/alert-dialog";
import { AlertDialogFooter } from "@/components/ui/alert-dialog";
import { AlertDialogCancel } from "@/components/ui/alert-dialog";
import { AlertDialogAction } from "@/components/ui/alert-dialog";

const args = {
  "variant": "main",
} satisfies Partial<
  InstanceType<typeof AlertDialogAction> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown> & { variant?: "main" | "destructive" };
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="tertiary"> Show AlertDialog </Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Leaving Page</AlertDialogTitle>
        <AlertDialogDescription>
          You are about to leave this page. Any unsaved changes will be lost. Do
          you wish to proceed?
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction v-bind="args">Continue</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

Destructive

<script setup lang="ts">
import { AlertDialog } from "@/components/ui/alert-dialog";
import { AlertDialogTrigger } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { AlertDialogContent } from "@/components/ui/alert-dialog";
import { AlertDialogHeader } from "@/components/ui/alert-dialog";
import { AlertDialogTitle } from "@/components/ui/alert-dialog";
import { AlertDialogDescription } from "@/components/ui/alert-dialog";
import { AlertDialogFooter } from "@/components/ui/alert-dialog";
import { AlertDialogCancel } from "@/components/ui/alert-dialog";
import { AlertDialogAction } from "@/components/ui/alert-dialog";

const args = {
  "variant": "destructive",
} satisfies Partial<
  InstanceType<typeof AlertDialogAction> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown> & { variant?: "main" | "destructive" };
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="tertiary"> Show AlertDialog </Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Delete Account</AlertDialogTitle>
        <AlertDialogDescription>
          Are you sure you want to delete your account? This action cannot be
          undone.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction v-bind="args">Delete</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

AlertDialogAction

AlertDialogCancel

AlertDialogContent

AlertDialogDescription

AlertDialogFooter

AlertDialogHeader

AlertDialogMedia

AlertDialogTitle

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.