Badge
BsBadge is small and a lightweight component which is mainly used for adaptive tagging such as adding context to just about any content.
Overview
BsBadge is a lightweight component and can scale to match the size of the immediate parent element by using relative font sizing.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
BsBadge can be used as part of links or button to provide a counter.
INFO
- BsBadge originally used Bootstrap CSS classes. However, since v2.2.0, BsBadge no longer uses Bootstrap CSS. This improvement allows BsBadge 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.
Contextual Badges
Add any of the following variants: primary, secondary, success, warning, danger, info or light to the variant property to change the appearance of a badge. If no variant is specified, the color property is used.
If you wish to use color different variation, you can change its appearance by explicitly define the value of color property. Any additional color variants can be applied to the color property.
Style Variants
Label
Sets the type property of <bs-badge> to label to make badges little larger than normal with a slight larger padding.
Rounded Pill
Sets the type property of <bs-badge> to pill to make badges more rounded with a larger border-radius and a slight larger padding.
Outlined
Define the outlined property explicitly to create outline badges. Additionally you can combine with the type property to create an Rounded Pill badge or Label badge with outlined style.
Actionable Badges
Quickly provide actionable badges with hover and focus states by specifying the tag and href property.
Badge Positioning
Use bootstrap css utilities to modify a badge and position it in the corner of a link or button. Or even create rounded badge without a count for a more generic indicator.
CSS Variables
As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-badge for better customization.
.md-badge {
--md-badge-border-radius: #{vars.$badge-border-radius};
--md-badge-color: #{colors.$white};
--md-badge-font-size: #{vars.$badge-font-size};
--md-badge-font-weight: var(--font-weight-medium);
--md-badge-padding-x: #{vars.$badge-padding-x};
--md-badge-padding-y: #{vars.$badge-padding-y};
}SASS mixins
Sometimes, simply creating a new actionable badge color variants can be overwhelming, as there are too many CSS variables to modify. For cases like this, Vue MDBootstrap provides SASS mixins to help you create new actionable badge color variants.
use 'vue-mdbootstrap/scss/mixins/badge';
@include badge.make-actionable-variant-light($name, $color);use 'vue-mdbootstrap/scss/mixins/badge';
@include badge.make-actionable-variant-dark($name, $color);