Vuetify — Alert Styles

Image for post
Image for post
Photo by Randy Laybourne on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.


We create an alert with v-alert component.

To do that, we write:

We can add a border with:

We set the color to red to make a red border.

border is set to top to add the border to the top.

Colored Border

We can set the colored-border prop to add a colored border:

Dense Alert

We can make the alert box smaller with the dense prop.

For example, we can write:

to make it denser with the dense prop.


We can add an icon to it with the icon prop:

We add a firework icon to the left with the icon prop.


We can make the alert displayed as an outline version with:

Then outlined prop makes the outline.


The prominent prop provides a more pronounced alert by increasing the height and adding a halo to the icon:”

We added the prominent prop and everything else will be applied automatically.


We can add the text prop to create a simple alert variant with only text.

It can be combined with the dense , prominent and outlined props:

We only have text in our alert.


We can create alerts with various styles provided by Vuetify.

Written by

Web developer. Subscribe to my email list now at Email me at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store