Radix Vue

Appearance

Alert Dialog ​

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

Features ​

  • Focus is automatically trapped.
  • Can be controlled or uncontrolled.
  • Manages screen reader announcements with Title and Description components.
  • Esc closes the component automatically.

Installation ​

Install the component from your command line.

bash
npm install radix-vue

Anatomy ​

Import all parts and piece them together.

vue
<script setup lang="ts">
import {
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from 'radix-vue'
</script>

<template>
  <AlertDialogRoot>
    <AlertDialogTrigger />
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogContent>
        <AlertDialogTitle />
        <AlertDialogDescription />
        <AlertDialogCancel />
        <AlertDialogAction />
      </AlertDialogContent>
    </AlertDialogPortal>
  </AlertDialogRoot>
</template>

API Reference ​

Root ​

Contains all the parts of an alert dialog.

PropTypeDefault
defaultOpen
boolean
open
boolean
EmitType
@update:open
(open: boolean) => void

Trigger ​

A button that opens the dialog.

PropTypeDefault
as
string | Component
trigger
asChild
boolean
false
Data AttributeValue
[data-state]"open" | "closed"

Portal ​

When used, portals your overlay and content parts into the body.

PropTypeDefault
to
string | HTMLElement
body

Overlay ​

A layer that covers the inert portion of the view when the dialog is open.

PropTypeDefault
as
string | Component
div
asChild
boolean
false
forceMount
boolean
Data AttributeValue
[data-state]"open" | "closed"

Content ​

Contains content to be rendered when the dialog is open.

PropTypeDefault
as
string | Component
div
asChild
boolean
false
forceMount
boolean
EmitType
@openAutoFocus
(event: Event) => void
@closeAutoFocus
(event: Event) => void
@escapeKeyDown
(event: KeyboardEvent) => void
Data AttributeValue
[data-state]"open" | "closed"

Cancel ​

A button that closes the dialog. This button should be distinguished visually from AlertDialogAction buttons.

PropTypeDefault
as
string | Component
button
asChild
boolean
false

Action ​

A button that closes the dialog. These buttons should be distinguished visually from the AlertDialogCancel button.

PropTypeDefault
as
string | Component
button
asChild
boolean
false

Title ​

An accessible name to be announced when the dialog is opened. Alternatively, you can provide aria-label or aria-labelledby to AlertDialogContent and exclude this component.

PropTypeDefault
as
string | Component
h2
asChild
boolean
false

Description ​

An accessible description to be announced when the dialog is opened. Alternatively, you can provide aria-describedby to AlertDialogContent and exclude this component.

PropTypeDefault
as
string | Component
p
asChild
boolean
false

Examples ​

Close after asynchronous form submission ​

Use the controlled props to programmatically close the Alert Dialog after an async operation has completed.

vue
<script setup>
import {
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from 'radix-vue'

const wait = () => new Promise(resolve => setTimeout(resolve, 1000))
const open = ref(false)
</script>

<template>
  <AlertDialogRoot v-model:open="open">
    <AlertDialogTrigger>Open</AlertDialogTrigger>
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogContent>
        <form
          @submit.prevent="
            (event) => {
              wait().then(() => open = false);
            }
          "
        >
          <!-- some inputs -->
          <button type="submit">
            Submit
          </button>
        </form>
      </AlertDialogContent>
    </AlertDialogPortal>
  </AlertDialogRoot>
</template>

Custom portal container ​

Customise the element that your alert dialog portals into.

vue
<script setup>
import { ref } from 'vue'

const container = ref(null)
</script>

<template>
  <div>
    <AlertDialogRoot>
      <AlertDialogTrigger />
      <AlertDialogPortal :to="container">
        <AlertDialogOverlay />
        <AlertDialogContent>...</AlertDialogContent>
      </AlertDialogPortal>
    </AlertDialogRoot>

    <div ref="container" />
  </div>
</template>

Accessibility ​

Adheres to the Alert and Message Dialogs WAI-ARIA design pattern.

Keyboard Interactions ​

KeyDescription
Space
Opens/closes the dialog.
Enter
Opens/closes the dialog.
Tab
Moves focus to the next focusable element.
Shift + Tab
Moves focus to the previous focusable element.
Esc
Closes the dialog and moves focus to AlertDialogTrigger.