v-alert component is used to convey important information to the user through the use contextual types icons and color. These default types come in in 4 variations: success, info, warning, and error. Default icons are assigned which help represent different actions each type portrays. Many parts of an alert such as
color can also be customized to fit almost any situation.
Alerts in their simplist form displays a message with default theme and style.
border prop adds a simple border to one of the 4 sides of the alert. This can be combined props like with
type to provide unique accents to the alert.
color-border prop merges the styles of both outlined and border props. This prop requires a
border to be set and will swap the background color to the border. If a
type is set, it will use the types default color. If no
type is set, the color will default to the inverted color of the applied theme (black for light and white/gray for dark).
dense prop hides the icon and descreases the height of the alert creating a simple and compact style. This prop, when combined with
border, will decrease the border thickness to stay consistant with the style.
dismissible 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. You can restore the alert by binding
v-model and setting it to true. Applying the
close-label prop will apply aria-label for this type of alert.
icon prop allows you to add an icon to the beginining of the alert component. If a
type is provided, this will override the default type icon. Additionally setting
icon to false will remove the icon altogether.
outlined prop inverts the style of an alert, inheriting its background color from the current theme background and inheriting its border color from the components applied color.
prominent prop provides a more pronounced alert by increasing the height and applying a halo to the icon. When applying both
dense together, the alert will take on the appearance of a normal alert but with the
prominent icon effects.
text prop is a simple alert variant that applies a transparent background and the colors from props
type to its text. Similiar to other styled props,
text can be combined with other props like
outlined to effectively color the text.
transition prop allows you to apply a transition to the alert which is viewable when the component hides and shows. You can use any of Vuetifies prebuilt transitions found here or you may create your own.
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.
color-border props you can create stylish custom alerts such as this twitter notification.