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 default color. You can use color property to change its color and add some emotional weight.
INFO
- BsAlert originally used Bootstrap CSS classes. However, since v2.2.0, BsAlert no longer uses Bootstrap CSS. This improvement allows BsAlert to work seamlessly with the TailwindCSS and Bootstrap CSS frameworks.
- The bundle only provide contextual color variants. It is located at
dist/theme-light.cssanddist/theme-dark.cssfiles. If the component style and color doesn't suit to your needs, you can customize it using the component's CSS variables or use the provided SASS mixins.
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 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
As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-alert for better customization.
.md-alert {
--md-alert-bg: #{$background-color};
--md-alert-border-color: #{$border-color};
--md-alert-color: #{$color};
--md-alert-link-color: #{$link-color};
--md-alert-padding-x: #{vars.$alert-padding-x};
--md-alert-padding-y: #{vars.$alert-padding-y};
--md-alert-margin-bottom: #{vars.$alert-margin-bottom};
--md-alert-border: 1px solid var(--md-alert-border-color);
--md-alert-border-radius: var(--md-radius);
--md-alert-icon-spacing: #{vars.$alert-icon-spacing};
}SASS mixins
Sometimes, simply creating a new alert color can be overwhelming, as there are too many CSS variables to modify. For cases like this, Vue MDBootstrap provides several SASS mixins to help you create new alert style variants.
use 'vue-mdbootstrap/scss/mixins/alert';
@include alert.make-default-variant-light($name, $color);
@include alert.make-outline-variant-light($name, $color);
@include alert.make-solid-variant($name, $color);use 'vue-mdbootstrap/scss/mixins/alert';
@include alert.make-default-variant-dark($name, $color);
@include alert.make-outline-variant-dark($name, $color);
@include alert.make-solid-variant($name, $color);