Alert - Vue

Alerts show high-signal messages meant to be noticed and prompting users.

AndroidreleasedElementsreleasediOSreleasedReactreleasedReact 19releasedVuereleased

Vue

AndroidElementsiOSReactReact 19Vue

Import

Use in entire app

import { Alert } from '@warp-ds/vue';
app.use(Alert);

Use in one component and special imports

You can import the component like so:

import { wAlert } from '@warp-ds/vue';

or import it individually to optimize your JS bundle size by adding only the components you need:

import { wAlert } from '@warp-ds/vue/alert';

Syntax

<w-alert v-model="showAlert" info title="I am a title">
  <p>I am an excellent message for the user.</p>
</w-alert>

Props

Optional Props

Name	Type	Default	Description
v-model	boolean	undefined	Controls when the alert shows
title	string	undefined	The title for the alert
role	string	alert	The aria role for the alert
negative	boolean	undefined	Creates a negative alert
positive	boolean	undefined	Creates a positive alert
warning	boolean	undefined	Creates a warning alert
info	boolean	undefined	Creates an info alert

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system