Skip to content

feat(VAlert): add duration prop to auto-dismiss alerts#22947

Open
eldardada wants to merge 1 commit into
vuetifyjs:masterfrom
eldardada:feat/valert-duration
Open

feat(VAlert): add duration prop to auto-dismiss alerts#22947
eldardada wants to merge 1 commit into
vuetifyjs:masterfrom
eldardada:feat/valert-duration

Conversation

@eldardada

Copy link
Copy Markdown

Description

Adds a duration prop to VAlert that automatically dismisses the alert after a given time in milliseconds. Currently developers have to wire up their own setTimeout to hide an alert after a delay; this brings the behavior in line with VSnackbar's timeout.

  • duration accepts a number (or numeric string) of milliseconds.
  • 0 (default) keeps the current behavior and never auto-dismisses, so the change is fully backwards compatible.
  • The timer restarts when the alert becomes visible again or when duration changes, and is cleared on manual close and on unmount — mirroring VSnackbar's timeout handling.

A unit test covers both auto-dismiss and the duration="0" (persistent) case, and the API description has been added.

resolves #20409

Markup:

<template>
  <v-btn @click="visible = true">Show alert</v-btn>
  <v-alert
    v-model="visible"
    :duration="3000"
    closable
    type="success"
    text="I will dismiss myself after 3 seconds"
  />
</template>

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

  const visible = shallowRef(true)
</script>

Add a `duration` prop that automatically dismisses the alert after the
given time in milliseconds. A value of `0` (default) preserves the
current behavior and never auto-dismisses. The timer restarts when the
alert becomes visible or the duration changes, pauses while the alert is
hovered or focused, and is cleared on manual close and on unmount —
mirroring VSnackbar's timeout handling.

resolves vuetifyjs#20409
@eldardada eldardada force-pushed the feat/valert-duration branch from 7226b80 to ddfea8d Compare June 26, 2026 20:44
@eldardada

eldardada commented Jun 26, 2026

Copy link
Copy Markdown
Author

On the prop name: I used duration as asked in #20409, though VSnackbar already calls the same thing timeout. The "off" value differs too: 0 (the default) means "never dismiss" here so existing alerts keep working, whereas VSnackbar defaults to 5000 and uses -1 for never. Happy to rename to timeout and match that convention if you'd rather the two line up.

@eldardada

Copy link
Copy Markdown
Author

On pausing: I copied the hover/focus handling from VSnackbar (pointerenter/leave + focusin/out), so an alert with a close button or links in a slot doesn't vanish while someone's reading it or reaching to click. Covers WCAG 2.2.1 as a side effect.

@eldardada

Copy link
Copy Markdown
Author

On reuse: I kept the timer inline rather than extracting a shared helper. VSnackbar's useCountdown is local and not exported, so sharing it would mean touching VSnackbar and pushing this past a good first issue. Can split that out separately if you want the two unified.

@eldardada

Copy link
Copy Markdown
Author

On edge values: Infinity and values past the 32-bit setTimeout limit dismiss right away, same as VSnackbar today. Left it for parity, can add a guard if you'd prefer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Add duration Prop to Automatically Dismiss v-alert

1 participant