Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Component Features

🛑 Interruptive: Forces the user to make a decision before continuing.
⌨️ Keyboard Support: Full keyboard navigation, including Escape to close (if allowed) and Tab trapping.
🎨 Customizable: Easy to customize styles and colors for different intent (e.g., danger/destructive actions).
♿ Accessible: Follows WAI-ARIA guidelines for dialogs.

Basic Usage

The most basic alert dialog display.

<script setup lang="ts">
import { 
  BrAlertDialog, 
  BrAlertDialogTrigger, 
  BrAlertDialogContent, 
  BrAlertDialogHeader, 
  BrAlertDialogTitle, 
  BrAlertDialogDescription, 
  BrAlertDialogFooter, 
  BrAlertDialogAction, 
  BrAlertDialogCancel, 
  BrButton 
} from '@breezeui/vue'
</script>

<template>
  <BrAlertDialog>
    <BrAlertDialogTrigger as-child>
      <BrButton outline>Show Dialog</BrButton>
    </BrAlertDialogTrigger>
    <BrAlertDialogContent>
      <BrAlertDialogHeader>
        <BrAlertDialogTitle>Are you absolutely sure?</BrAlertDialogTitle>
        <BrAlertDialogDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </BrAlertDialogDescription>
      </BrAlertDialogHeader>
      <BrAlertDialogFooter>
        <BrAlertDialogCancel>Cancel</BrAlertDialogCancel>
        <BrAlertDialogAction>Continue</BrAlertDialogAction>
      </BrAlertDialogFooter>
    </BrAlertDialogContent>
  </BrAlertDialog>
</template>

Custom Action Color

You can customize the color of the action button to match the intent of the dialog, such as using color="danger" for destructive actions.

<script setup lang="ts">
import { 
  BrAlertDialog, 
  BrAlertDialogTrigger, 
  BrAlertDialogContent, 
  BrAlertDialogHeader, 
  BrAlertDialogTitle, 
  BrAlertDialogDescription, 
  BrAlertDialogFooter, 
  BrAlertDialogAction, 
  BrAlertDialogCancel, 
  BrButton 
} from '@breezeui/vue'
</script>

<template>
  <BrAlertDialog>
    <BrAlertDialogTrigger as-child>
      <BrButton color="danger" variant="soft">Delete Account</BrButton>
    </BrAlertDialogTrigger>
    <BrAlertDialogContent>
      <BrAlertDialogHeader>
        <BrAlertDialogTitle>Delete Account</BrAlertDialogTitle>
        <BrAlertDialogDescription>
          Are you sure you want to delete your account? All of your data will be permanently removed.
          This action cannot be undone.
        </BrAlertDialogDescription>
      </BrAlertDialogHeader>
      <BrAlertDialogFooter>
        <BrAlertDialogCancel>Cancel</BrAlertDialogCancel>
        <BrAlertDialogAction color="danger">Delete</BrAlertDialogAction>
      </BrAlertDialogFooter>
    </BrAlertDialogContent>
  </BrAlertDialog>
</template>

Async Loading & Prevent Outside Close

For async submits (delete/payment/unlink, etc.), it's common to:

Show a loading state and prevent duplicate clicks
Block outside click and ESC closing while the request is in-flight

<script setup lang="ts">
import { ref } from 'vue'
import {
  BrAlertDialog,
  BrAlertDialogAction,
  BrAlertDialogCancel,
  BrAlertDialogContent,
  BrAlertDialogDescription,
  BrAlertDialogFooter,
  BrAlertDialogHeader,
  BrAlertDialogTitle,
  BrAlertDialogTrigger,
  BrButton,
} from '@breezeui/vue'

const SUBMIT_DELAY_MS = 1200

const open = ref(false)
const submitting = ref(false)

const sleep = (ms: number) =>
  new Promise<void>((resolve) => {
    setTimeout(resolve, ms)
  })

const handleUpdateOpen = (nextOpen: boolean) => {
  if (submitting.value && nextOpen === false) {
    return
  }
  open.value = nextOpen
}

const handleEscapeKeyDown = (e: KeyboardEvent) => {
  if (!submitting.value) {
    return
  }
  e.preventDefault()
}

const handleConfirm = async () => {
  if (submitting.value) {
    return
  }

  submitting.value = true
  try {
    await sleep(SUBMIT_DELAY_MS)
    open.value = false
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <BrAlertDialog :open="open" @update:open="handleUpdateOpen">
    <BrAlertDialogTrigger as-child>
      <BrButton color="danger" variant="soft">Delete Account</BrButton>
    </BrAlertDialogTrigger>

    <BrAlertDialogContent
      :prevent-outside-close="submitting"
      @escape-key-down="handleEscapeKeyDown"
    >
      <BrAlertDialogHeader>
        <BrAlertDialogTitle>Delete Account</BrAlertDialogTitle>
        <BrAlertDialogDescription>
          This action cannot be undone. While submitting, outside click and ESC closing are blocked.
        </BrAlertDialogDescription>
      </BrAlertDialogHeader>

      <BrAlertDialogFooter>
        <BrAlertDialogCancel :disabled="submitting">Cancel</BrAlertDialogCancel>
        <BrAlertDialogAction
          color="danger"
          :loading="submitting"
          :disabled="submitting"
          @click="handleConfirm"
        >
          Confirm Delete
        </BrAlertDialogAction>
      </BrAlertDialogFooter>
    </BrAlertDialogContent>
  </BrAlertDialog>
</template>

API Reference

BrAlertDialog

Prop	Type	Default	Description
defaultOpen	`boolean`	`false`	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
open (v-model)	`boolean`	-	The controlled open state of the dialog.

BrAlertDialogTrigger

Used to wrap the element that will trigger the alert dialog.

Prop	Type	Default	Description
asChild	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.

BrAlertDialogContent

Prop	Type	Default	Description
class	`any`	-	Custom class name
hideOverlay	`boolean`	`false`	Whether to hide the background overlay
preventOutsideClose	`boolean`	`false`	Whether to prevent closing the dialog when clicking outside

BrAlertDialogHeader / BrAlertDialogFooter

Containers for the header (title/description) and footer (action/cancel buttons).

BrAlertDialogTitle

Prop	Type	Default	Description
asChild	`boolean`	`false`	Change the default rendered element for the one passed as a child.
class	`any`	-	Custom class name

BrAlertDialogDescription

Prop	Type	Default	Description
asChild	`boolean`	`false`	Change the default rendered element for the one passed as a child.
class	`any`	-	Custom class name

BrAlertDialogAction

Prop	Type	Default	Description
class	`any`	-	Custom class name
variant	`'solid' \| 'outline' \| 'dashed' \| 'soft' \| 'ghost' \| 'link' \| 'plain' \| 'pure'`	`'solid'`	The variant of the button
color	`'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	The color of the button
disabled	`boolean`	`false`	Whether the action button is disabled
loading	`boolean`	`false`	Whether the action button is in loading state

BrAlertDialogCancel

Prop	Type	Default	Description
class	`any`	-	Custom class name
variant	`'solid' \| 'outline' \| 'dashed' \| 'soft' \| 'ghost' \| 'link' \| 'plain' \| 'pure'`	`'outline'`	The variant of the button
color	`'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'`	`'default'`	The color of the button
disabled	`boolean`	`false`	Whether the cancel button is disabled

#Alert Dialog

#Component Features

#Basic Usage

#Custom Action Color

#Async Loading & Prevent Outside Close

#API Reference

#BrAlertDialog

#BrAlertDialogTrigger

#BrAlertDialogContent

#BrAlertDialogHeader / BrAlertDialogFooter

#BrAlertDialogTitle

#BrAlertDialogDescription

#BrAlertDialogAction

#BrAlertDialogCancel