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.

Alerts

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.

Icon

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

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

Outlined

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

Then outlined prop makes the outline.

Prominent

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.

Text

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.

Conclusion

We can create alerts with various styles provided by Vuetify.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

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