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 uses Boostrap CSS classes internally 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.
Contextual Badges
Add any of the following variants: primary, secondary, success, warning, danger, info, light, or dark 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 color variants can be applied to the color property.
Style Variants
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.
Label
Sets the type property of <bs-badge> to label to make badges little larger than normal with 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 outline Pill badge or outline Label badge. Currently outline badges only support MDBootstrap Color variant and Material Color variant.
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.
Added since v2.0.0