|
| 1 | +--- |
| 2 | +title: Alert - Inline Status Banner Component |
| 3 | +meta: |
| 4 | +- name: description |
| 5 | + content: Headless inline alert component with role="alert" for status messages, warnings, and dismissible banners. Composable sub-components for icon, title, description, and dismiss action. |
| 6 | +- name: keywords |
| 7 | + content: alert, banner, notification, status, warning, error, success, info, dismissible, Vue 3, headless, accessible, WAI-ARIA |
| 8 | +features: |
| 9 | + category: Component |
| 10 | + label: 'C: Alert' |
| 11 | + github: /components/Alert/ |
| 12 | + renderless: false |
| 13 | + level: 2 |
| 14 | +related: |
| 15 | + - /components/semantic/snackbar |
| 16 | + - /components/disclosure/alert-dialog |
| 17 | + - /components/semantic/progress |
| 18 | +--- |
| 19 | + |
| 20 | +# Alert |
| 21 | + |
| 22 | +Inline status banner for persistent, non-interrupting feedback — errors, warnings, and contextual notices. |
| 23 | + |
| 24 | +<DocsPageFeatures :frontmatter /> |
| 25 | + |
| 26 | +## Usage |
| 27 | + |
| 28 | +Alert renders with `role="alert"` so screen readers announce the content automatically when the component enters the DOM. Use it for feedback that belongs inline with page content and does not require user acknowledgement. |
| 29 | + |
| 30 | +::: example |
| 31 | +/components/alert/basic |
| 32 | + |
| 33 | +### Informational and warning banners |
| 34 | + |
| 35 | +Static alerts with icon, title, and description — the most common pattern for system notices, in-form error summaries, and section-level warnings. |
| 36 | + |
| 37 | +| Sub-component | Role | |
| 38 | +|---|---| |
| 39 | +| `Alert.Root` | Container; carries `role="alert"` and ARIA ID links | |
| 40 | +| `Alert.Icon` | Decorative icon wrapper; `aria-hidden="true"` by default | |
| 41 | +| `Alert.Title` | Heading with auto-generated ID for `aria-labelledby` | |
| 42 | +| `Alert.Description` | Body text with auto-generated ID for `aria-describedby` | |
| 43 | + |
| 44 | +::: |
| 45 | + |
| 46 | +## Anatomy |
| 47 | + |
| 48 | +```vue Anatomy playground collapse |
| 49 | +<script setup lang="ts"> |
| 50 | + import { Alert } from '@vuetify/v0' |
| 51 | +</script> |
| 52 | +
|
| 53 | +<template> |
| 54 | + <Alert.Root> |
| 55 | + <Alert.Icon /> |
| 56 | + <Alert.Title /> |
| 57 | + <Alert.Description /> |
| 58 | + <Alert.Action /> |
| 59 | + </Alert.Root> |
| 60 | +</template> |
| 61 | +``` |
| 62 | + |
| 63 | +## Examples |
| 64 | + |
| 65 | +::: example |
| 66 | +/components/alert/dismissible |
| 67 | + |
| 68 | +### Dismissible alerts |
| 69 | + |
| 70 | +Alerts can be made dismissible by adding `Alert.Action` and binding `v-model` on `Alert.Root`. When the action is clicked, `dismiss()` is called internally and `v-model` is set to `false`. |
| 71 | + |
| 72 | +Use `v-if` on `Alert.Root` to remove the element from the DOM after dismissal — `role="alert"` elements should not stay in the DOM silently, because some screen readers re-announce live regions when page state changes. |
| 73 | + |
| 74 | +```vue |
| 75 | +<template> |
| 76 | + <Alert.Root v-if="visible" v-model="visible"> |
| 77 | + ... |
| 78 | + <Alert.Action>✕</Alert.Action> |
| 79 | + </Alert.Root> |
| 80 | +</template> |
| 81 | +``` |
| 82 | + |
| 83 | +You can also react to the model externally — for example, to persist the dismissed state across sessions: |
| 84 | + |
| 85 | +```ts |
| 86 | +const dismissed = useStorage('alert-dismissed', false) |
| 87 | +``` |
| 88 | + |
| 89 | +```vue |
| 90 | +<template> |
| 91 | + <Alert.Root v-if="!dismissed" v-model:model-value="isDismissed => dismissed = isDismissed"> |
| 92 | + ... |
| 93 | + </Alert.Root> |
| 94 | +</template> |
| 95 | +``` |
| 96 | + |
| 97 | +| File | Role | |
| 98 | +|---|---| |
| 99 | +| `dismissible.vue` | Two dismissible alerts with v-model binding and a reset button | |
| 100 | + |
| 101 | +::: |
| 102 | + |
| 103 | +## Alert vs Snackbar vs AlertDialog |
| 104 | + |
| 105 | +| | Alert | Snackbar | AlertDialog | |
| 106 | +|---|---|---|---| |
| 107 | +| **Position** | Inline, in document flow | Floating overlay | Modal overlay | |
| 108 | +| **Auto-dismiss** | No | Yes (configurable) | No | |
| 109 | +| **Interrupts focus** | No | No | Yes — focus moves to dialog | |
| 110 | +| **ARIA** | `role="alert"` | `role="status"` / `role="alert"` | `role="alertdialog"` | |
| 111 | +| **Use case** | Persistent page-level notices | Transient confirmations | Requires explicit acknowledgement | |
| 112 | + |
| 113 | +> [!TIP] |
| 114 | +> Alerts present in the DOM **before** page load are not announced by most screen readers — the live region only fires on mutation. Dynamically insert the alert (via `v-if`) after user action or data load to guarantee announcement. |
| 115 | +
|
| 116 | +> [!WARNING] |
| 117 | +> Do not auto-dismiss alerts. The WAI-ARIA spec notes that alerts that disappear automatically violate WCAG 2.0 criterion 2.2.3 (No Timing). If you need ephemeral, auto-dismissing feedback, use [Snackbar](/components/semantic/snackbar) instead. |
| 118 | +
|
| 119 | +## Accessibility |
| 120 | + |
| 121 | +### ARIA roles and attributes |
| 122 | + |
| 123 | +| Attribute | Element | Value | Purpose | |
| 124 | +|---|---|---|---| |
| 125 | +| `role` | `Alert.Root` | `"alert"` | Declares a live region with `aria-live="assertive"` implicit semantics | |
| 126 | +| `aria-labelledby` | `Alert.Root` | `{id}-title` | Links root to `Alert.Title` for accessible name | |
| 127 | +| `aria-describedby` | `Alert.Root` | `{id}-description` | Links root to `Alert.Description` for supplementary text | |
| 128 | +| `id` | `Alert.Title` | `{id}-title` | Target for `aria-labelledby` | |
| 129 | +| `id` | `Alert.Description` | `{id}-description` | Target for `aria-describedby` | |
| 130 | +| `aria-hidden` | `Alert.Icon` | `"true"` | Hides decorative icon from screen reader tree | |
| 131 | +| `type` | `Alert.Action` | `"button"` | Prevents accidental form submission | |
| 132 | +| `aria-label` | `Alert.Action` | locale `Alert.dismiss` | Accessible name for icon-only dismiss buttons | |
| 133 | + |
| 134 | +### Screen reader behavior |
| 135 | + |
| 136 | +`role="alert"` has implicit `aria-live="assertive"` and `aria-atomic="true"` in all major browsers. When an alert enters or changes in the DOM, the entire alert content is announced immediately, interrupting any in-progress announcements. |
| 137 | + |
| 138 | +For non-urgent status messages (e.g. "saved successfully"), prefer [Snackbar](/components/semantic/snackbar) which uses `aria-live="polite"` and does not interrupt. |
| 139 | + |
| 140 | +### Icon accessibility |
| 141 | + |
| 142 | +`Alert.Icon` renders `aria-hidden="true"` by default. If your icon communicates meaning beyond what the text already conveys (e.g. an icon that is the *only* indicator of severity), remove `aria-hidden` and provide a visible or screen-reader-only label instead: |
| 143 | + |
| 144 | +```vue |
| 145 | +<template> |
| 146 | + <!-- Icon carries unique meaning — expose it --> |
| 147 | + <Alert.Icon :aria-hidden="false" aria-label="Error"> |
| 148 | + <ErrorIcon /> |
| 149 | + </Alert.Icon> |
| 150 | +</template> |
| 151 | +``` |
| 152 | + |
| 153 | +<DocsApi /> |
0 commit comments