The type prop provides 4 default v-alert
styles: success, info, warning, and error. Each of these styles provide a default icon and color. The default colors can be configured globally by customizing Vuetify's theme.
The border prop adds a simple border to one of the 4 sides of the alert. This can be combined props like with color, dark, and type to provide unique accents to the alert.
The colored-border prop removes the alert background in order to accent the border prop. If a type is set, it will use the types default color. If no color or type is set, the color will default to the inverted color of the applied theme (black for light and white/gray for dark).
The density prop decreases the height of the alert based upon 1 of 3 levels of density; default, comfortable, and compact.
The closable prop adds a close button to the end of the alert component. Clicking this button will set its value to false and effectively hide the alert
The icon prop allows you to add an icon to the beginning of the alert component. If a type is provided, this will override the default type icon. Additionally setting the icon prop to false will remove the icon altogether.
The outlined prop inverts the style of an alert, inheriting the currently applied color, applying it to the text and border, and making its background transparent.
The prominent prop provides a more pronounced alert by increasing the height and applying a halo to the icon. When applying both prominent and dense together, the alert will take on the appearance of a normal alert but with the prominent icon effects.
The variant prop provides an easy way to change the overall style of your alerts. Together with other props like density, prominent, border, and shaped, it allows you to create a unique and customized component.
The rounded prop will add or remove border-radius to the alert. Similar to other styled props, rounded can be combined with other props like density, prominent, and variant to create a unique and customized component.