Alert dialog - Pharen

Use Alert dialog to confirm a consequential action. This page covers every Vue component exported by the public module.

Install the package and import its styles once. See Installation for the complete setup.

Import

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from '@pharen/ui';

Example

<script setup lang="ts">
import { AlertDialog, AlertDialogTrigger, AlertDialogContent } from '@pharen/ui';
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger>Open alert dialog</AlertDialogTrigger>
    <AlertDialogContent>Alert dialog content</AlertDialogContent>
  </AlertDialog>
</template>

Exports

Export	Purpose
`AlertDialog`	Exported Vue component from this module.
`AlertDialogAction`	Exported Vue component from this module.
`AlertDialogCancel`	Exported Vue component from this module.
`AlertDialogContent`	Contains the visible content.
`AlertDialogDescription`	Renders supporting description.
`AlertDialogFooter`	Structures the footer region.
`AlertDialogHeader`	Structures the header region.
`AlertDialogMedia`	Exported Vue component from this module.
`AlertDialogOverlay`	Exported Vue component from this module.
`AlertDialogPortal`	Exported Vue component from this module.
`AlertDialogTitle`	Renders the accessible title.
`AlertDialogTrigger`	Opens or activates the component.

Source

Open the source on GitHub