Alert

Headless compound component for inline status messages. Renders a live region that screen readers announce automatically when content appears or changes.

Copy Markdown

PreviewRenders elementIntermediateAug 19, 2026

Usage

Changes saved

Your profile has been updated successfully.

Theme

Mode

Palettes

Accessibility

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Alert } from '@vuetify/v0'

  const visible = shallowRef(false)

  function onShow () {
    visible.value = true
  }

  function onDismiss () {
    visible.value = false
  }
</script>

<template>
  <div class="flex flex-col gap-4">
    <Alert.Root
      class="flex items-start gap-3 rounded border border-success/30 bg-success/10 px-4 py-3 text-sm text-success"
      role="status"
    >
      <Alert.Title class="font-semibold">
        Changes saved
      </Alert.Title>

      <Alert.Description class="text-success/80">
        Your profile has been updated successfully.
      </Alert.Description>
    </Alert.Root>

    <button
      class="self-start px-4 py-2 bg-primary text-on-primary rounded-md text-sm font-medium"
      type="button"
      @click="onShow"
    >
      Show session warning
    </button>

    <Alert.Root
      v-if="visible"
      class="flex items-start gap-3 rounded border border-error/30 bg-error/10 px-4 py-3 text-sm text-error"
    >
      <div class="flex flex-col gap-1 flex-1">
        <Alert.Title class="font-semibold">
          Session expiring
        </Alert.Title>

        <Alert.Description class="text-error/80">
          You will be signed out in 5 minutes.
        </Alert.Description>
      </div>

      <button
        class="shrink-0 p-1 -mr-1 opacity-50 hover:opacity-100"
        type="button"
        @click="onDismiss"
      >
        Dismiss
      </button>
    </Alert.Root>
  </div>
</template>

Anatomy

vue

<script setup lang="ts">
  import { Alert } from '@vuetify/v0'
</script>

<template>
  <Alert.Root>
    <Alert.Title />

    <Alert.Description />
  </Alert.Root>
</template>

Accessibility

Alert.Root is a live region. It emits role, aria-live, and aria-atomic="true" so assistive tech announces the whole message when the region is inserted or updated.

Role	`aria-live`	When
`alert` (default)	`assertive`	Errors, session expiry — interrupts immediately
`status`	`polite`	Confirmations and info — waits for idle

Mount Alert.Root when the message appears (v-if). Do not leave an empty region in the tree and flip it with v-show — live regions announce on insertion; v-show only toggles display and often produces no announcement.

Do not statically mount role="alert" as page chrome. An assertive region present at load interrupts the screen reader’s first pass of the page. A polite role="status" may stay mounted as chrome; insert assertive alerts on demand.