Vuetify — Alert Styles

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:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert type="success">success alert.</v-alert>

<v-alert type="info">info alert.</v-alert>

<v-alert type="warning">warning alert.</v-alert>

<v-alert type="error">error alert.</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We can add a border with:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert border="top" color="red lighten-2" dark>red border</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

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:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert border="left" colored-border color="deep-purple accent-4" elevation="2">lorem ipsum</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Dense Alert

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

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert dense type="info">dense alert</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to make it denser with the dense prop.

Icon

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

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert color="#2A3B4D" dark icon="mdi-firework" dense>icon alert</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

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

Outlined

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

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert outlined color="purple">
          <div class="title">Lorem Ipsum</div>
          <div>outlined alert.</div>
        </v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

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:”

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert
          color="blue-grey"
          dark
          dense
          icon="mdi-school"
          prominent
        >Sed augue ipsum, egestas nec</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

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:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert text outlined color="deep-orange" icon="mdi-fire">Nullam tincidunt adipiscing enim</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We only have text in our alert.

Conclusion

We can create alerts with various styles provided by Vuetify.