Overview
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Regular Badges
Add any of the below mentioned modifier classes to change the appearance of a badge.
Text Badges
Add a text-'theme-color' variant to your badge for a text that maintains the same spacing, just without the background color.
Counter Badges
Use the pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).
Badges in other elements
Badges can be inserted into other elements. Just be sure to utilize our utility classes to position your badges appropriately.
Badge Sizes
By default Badges scale according to their immediate parent element but there are also large and small options available, use classes badge-sm, badge-lg.
API
Badge
import Badge from `@trimbleinc/modus-react-bootstrap/Badge`| Name | Type | Default | Description |
|---|---|---|---|
| as | elementType | <span> | |
| pill | boolean | false | Add the |
| variant | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | The visual style of the badge | |
| bsPrefix | string | 'badge' |