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`
NameTypeDefaultDescription
as
elementType
<span>
pill
boolean
false

Add the pill modifier to make badges more rounded with some additional horizontal padding

variant
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'

The visual style of the badge

bsPrefix
string
'badge'