Alert

A simple component for notifiying users of specific information. Good for informative snippets, error messages, and more. It can be shown or hidden dynamically, and even supports auto-hiding after a given time.

• Source

Features:

• Includes ARIA role="alert" attribute.
• Option for dismiss button.
• Option for timeout.

Styled Examples

Unstyled Examples

Using v-model

With v-model, you can toggle an alert on or off.

Dismissible

Allow users to hide an alert

You can provide your own content for the dismiss button with the dismiss slot.

Countdown

It also supports providing seconds to the visible prop (or v-model) so the alert will hide after a short time.

Transitions

Custom Classes

This component can accept a classes prop to customize the output HTML classes:

:classes="{ root: string, dismiss: string }"