AlertDialog

Alert dialogs interrupt the current flow to ask the user to confirm a consequential action.

Import

<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogBody,
  AlertDialogCloseTrigger,
  AlertDialogContainer,
  AlertDialogDialog,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogHeading,
  AlertDialogIcon,
  AlertDialogTrigger,
} from '@heroui-vue/vue'
</script>

Usage

Default

<template>
  <AlertDialog>
    <AlertDialogTrigger>
      <Button variant="danger">Delete Project</Button>
    </AlertDialogTrigger>

    <AlertDialogBackdrop>
      <AlertDialogContainer>
        <AlertDialogDialog class="demo-alert-dialog">
          <AlertDialogCloseTrigger />
          <AlertDialogHeader>
            <AlertDialogIcon status="danger" />
            <AlertDialogHeading>Delete project permanently?</AlertDialogHeading>
          </AlertDialogHeader>
          <AlertDialogBody>
            This action cannot be undone. This will permanently delete the project and remove all
            associated data from our servers.
          </AlertDialogBody>
          <AlertDialogFooter v-slot="{ close }">
            <Button variant="secondary" @click="close">Cancel</Button>
            <Button variant="danger" @click="close">Delete</Button>
          </AlertDialogFooter>
        </AlertDialogDialog>
      </AlertDialogContainer>
    </AlertDialogBackdrop>
  </AlertDialog>
</template>

<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogBody,
  AlertDialogCloseTrigger,
  AlertDialogContainer,
  AlertDialogDialog,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogHeading,
  AlertDialogIcon,
  AlertDialogTrigger,
  Button,
} from '@heroui-vue/vue'
</script>

<style lang="less">
.demo-alert-dialog {
  max-width: 25rem;
}
</style>

With Close Button

<template>
  <AlertDialog>
    <AlertDialogTrigger>
      <Button variant="secondary">Open Alert</Button>
    </AlertDialogTrigger>

    <AlertDialogBackdrop>
      <AlertDialogContainer>
        <AlertDialogDialog class="demo-alert-dialog">
          <AlertDialogCloseTrigger />
          <AlertDialogHeader>
            <AlertDialogIcon status="accent" />
            <AlertDialogHeading>Less critical information</AlertDialogHeading>
          </AlertDialogHeader>
          <AlertDialogBody>
            This dialog includes a close button for lower-risk confirmation flows where users should
            be able to dismiss the message quickly.
          </AlertDialogBody>
          <AlertDialogFooter v-slot="{ close }">
            <Button variant="secondary" @click="close">Close</Button>
            <Button variant="primary" @click="close">Continue</Button>
          </AlertDialogFooter>
        </AlertDialogDialog>
      </AlertDialogContainer>
    </AlertDialogBackdrop>
  </AlertDialog>
</template>

<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogBody,
  AlertDialogCloseTrigger,
  AlertDialogContainer,
  AlertDialogDialog,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogHeading,
  AlertDialogIcon,
  AlertDialogTrigger,
  Button,
} from '@heroui-vue/vue'
</script>

<style lang="less">
.demo-alert-dialog {
  max-width: 25rem;
}
</style>

Backdrop Variants

<template>
  <div class="demo-alert-dialog-actions">
    <AlertDialog v-for="variant in variants" :key="variant">
      <AlertDialogTrigger>
        <Button variant="secondary">{{ labels[variant] }}</Button>
      </AlertDialogTrigger>

      <AlertDialogBackdrop :variant="variant">
        <AlertDialogContainer>
          <AlertDialogDialog class="demo-alert-dialog">
            <AlertDialogCloseTrigger />
            <AlertDialogHeader>
              <AlertDialogIcon status="accent" />
              <AlertDialogHeading>{{ labels[variant] }} Backdrop</AlertDialogHeading>
            </AlertDialogHeader>
            <AlertDialogBody>
              This alert dialog uses the {{ variant }} backdrop variant.
            </AlertDialogBody>
            <AlertDialogFooter v-slot="{ close }">
              <Button variant="secondary" @click="close">Cancel</Button>
              <Button variant="primary" @click="close">Confirm</Button>
            </AlertDialogFooter>
          </AlertDialogDialog>
        </AlertDialogContainer>
      </AlertDialogBackdrop>
    </AlertDialog>
  </div>
</template>

<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogBody,
  AlertDialogCloseTrigger,
  AlertDialogContainer,
  AlertDialogDialog,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogHeading,
  AlertDialogIcon,
  AlertDialogTrigger,
  Button,
  type AlertDialogBackdropVariant,
} from '@heroui-vue/vue'

const variants: AlertDialogBackdropVariant[] = ['transparent', 'opaque', 'blur']
const labels: Record<AlertDialogBackdropVariant, string> = {
  blur: 'Blur',
  opaque: 'Opaque',
  transparent: 'Transparent',
}
</script>

<style lang="less">
.demo-alert-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.demo-alert-dialog {
  max-width: 25rem;
}
</style>

Sizes

<template>
  <div class="demo-alert-dialog-actions">
    <AlertDialog v-for="size in sizes" :key="size">
      <AlertDialogTrigger>
        <Button variant="secondary">{{ size.toUpperCase() }}</Button>
      </AlertDialogTrigger>

      <AlertDialogBackdrop>
        <AlertDialogContainer :size="size">
          <AlertDialogDialog>
            <AlertDialogCloseTrigger />
            <AlertDialogHeader>
              <AlertDialogIcon class="demo-alert-dialog-default-icon" status="default" />
              <AlertDialogHeading>{{ size.toUpperCase() }} Alert Dialog</AlertDialogHeading>
            </AlertDialogHeader>
            <AlertDialogBody>
              This alert dialog uses the {{ size }} size variant. On mobile it still adapts to the
              viewport width.
            </AlertDialogBody>
            <AlertDialogFooter v-slot="{ close }">
              <Button variant="secondary" @click="close">Cancel</Button>
              <Button variant="primary" @click="close">Confirm</Button>
            </AlertDialogFooter>
          </AlertDialogDialog>
        </AlertDialogContainer>
      </AlertDialogBackdrop>
    </AlertDialog>
  </div>
</template>

<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogBody,
  AlertDialogCloseTrigger,
  AlertDialogContainer,
  AlertDialogDialog,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogHeading,
  AlertDialogIcon,
  AlertDialogTrigger,
  Button,
  type AlertDialogSize,
} from '@heroui-vue/vue'

const sizes: AlertDialogSize[] = ['xs', 'sm', 'md', 'lg']
</script>

<style lang="less">
.demo-alert-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.demo-alert-dialog-default-icon {
  background: var(--color-default);
  color: var(--color-foreground);
}
</style>

Anatomy

<template>
  <AlertDialog>
    <AlertDialogTrigger>
      <Button>Open</Button>
    </AlertDialogTrigger>

    <AlertDialogBackdrop>
      <AlertDialogContainer>
        <AlertDialogDialog>
          <AlertDialogCloseTrigger />
          <AlertDialogHeader>
            <AlertDialogIcon />
            <AlertDialogHeading>Confirm action?</AlertDialogHeading>
          </AlertDialogHeader>
          <AlertDialogBody>Dialog content</AlertDialogBody>
          <AlertDialogFooter v-slot="{ close }">
            <Button variant="secondary" @click="close">Cancel</Button>
            <Button variant="danger" @click="close">Confirm</Button>
          </AlertDialogFooter>
        </AlertDialogDialog>
      </AlertDialogContainer>
    </AlertDialogBackdrop>
  </AlertDialog>
</template>

API

AlertDialog Props

Prop	Type	Default	Description
modelValue	boolean	undefined	Controlled open state.
isOpen	boolean	undefined	Alternative controlled open state.
defaultOpen	boolean	false	Initial uncontrolled open state.

AlertDialogBackdrop Props

Prop	Type	Default	Description
variant	'transparent' | 'opaque' | 'blur'	'opaque'	Backdrop treatment.
isDismissable	boolean	false	Close when pressing the backdrop.
isKeyboardDismissDisabled	boolean	true	Disable Escape dismissal.

AlertDialogContainer Props

Prop	Type	Default	Description
placement	'auto' | 'top' | 'center' | 'bottom'	'auto'	Dialog placement.
size	'xs' | 'sm' | 'md' | 'lg' | 'cover'	'md'	Dialog width preset.

AlertDialogIcon Props

Prop	Type	Default	Description
status	'default' | 'accent' | 'success' | 'warning' | 'danger'	'danger'	Semantic icon color and default icon.