Alert
BsAlert is a component that provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages. With the right use of colors, they add some emotional weight of information, ranging from a simple warning to critical system failure or from an operation success to neutral information.
Overview
By default, <bs-alert> is set to primary color. You can use color property to change its color and add some emotional weight. Any MDBootstrap Color variants can be applied to the color property.
Style Variants
Default
Alert with default style variant will have appearance like Bootstrap alert.
Solid
Use filled property to enable the alert variant with solid fill style.
Outlined
Use outlined property to enable the alert variant with outline style.
Contextual Alert
Use variant property to create contextual alert with predefined icon. Additionally, you can sets icon-variant property to outlined (default), rounded, sharp, filled, outlined_filled, rounded_filled, or sharp_filled to set the icon style variant. See Google Material Symbols for details.
Custom Icon
Custom icon can be enabled by using the icon property and is loaded dynamically from Google Fonts site. Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled. Suffix _filled and _outlined_filled will display the same icon style variant. Suffix will take precedence over icon-variant property.
INFO
Since Vue MDBootstrap v2.1.0, Google Material Icons are replaced with Google Material Symbols.
Additional Contents
<bs-alert> can also contain additional HTML elements like headings and paragraphs, which will be styled with the appropriate color matching the variant.
Well done!
Aww yeah, you successfully read this alert message. This is an example how to construct Contextual Alert with additional contents.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Dismissible Alert
Use the dismissible property to dismiss any inline <bs-alert>. This will add a close x button.
Controlling dismissible alert
Use the v-model directive to create two-way data bindings on the model-value property as in v-model="showAlert". This is useful to control the dismissible alert, because when the alert is closed, the variable will be updated.
CSS Variables
The component css variables inherited from Bootstrap alerts css variables with some modifications.
Added since v2.0.0--bs-alert-bg: #{$alert-bg-color};
--bs-alert-border-color: #{$alert-border-color};
--bs-alert-border: 1px solid var(--bs-alert-border-color);
--bs-alert-border-radius: 0.375rem;
--bs-alert-color: #{$alert-color};
--bs-alert-hr-color: #{$hr-border-color};
--bs-alert-link-color: #{$link-color};
--bs-alert-margin-bottom: 1rem;
--bs-alert-padding-x: 1rem;
--bs-alert-padding-y: 0.7rem;