Badge
Documentation and examples for badges, our small count and labeling component.
Examples
Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of v5, badges no longer have focus or hover styles for links.
Headings
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h1>Example heading <BBadge>New</BBadge></h1>
<h2>Example heading <BBadge>New</BBadge></h2>
<h3>Example heading <BBadge>New</BBadge></h3>
<h4>Example heading <BBadge>New</BBadge></h4>
<h5>Example heading <BBadge>New</BBadge></h5>
<h6>Example heading <BBadge>New</BBadge></h6>
Buttons
Badges can be used as part of links or buttons to provide a counter.
<BButton variant="primary">Notifications <BBadge variant="light">4</BBadge></BButton>
Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.
Positioned
Use the placement
property to position it relative to a parent link or button. Note that for links of buttons, you haveto manually apply the postition-relative
class to the badge's parent, unlike with Avatars
where that is hanlded automatically.
<BButton variant="primary" class="position-relative">
Inbox
<BBadge variant="danger" placement="top-end">
99+
<span class="visually-hidden">unread messages</span>
</BBadge>
</BButton>
The Badge
component also implements a dot-indicator
property to transform the badge into a more generic indicator. Please note that you have to manually apply the position-relative
class to the parent button.
<BButton variant="primary" class="position-relative">
Inbox
<BBadge variant="danger" dot-indicator>
<span class="visually-hidden">New alerts</span>
</BBadge>
</BButton>
Background colors
Add any of the following variants via the variant
prop to change the appearance of a BBadge
: default
, primary
, success
, warning
, info
, and danger
. If no variant is specified default
will be used.
<BBadge variant="primary">Primary</BBadge>
<BBadge variant="secondary">Secondary</BBadge>
<BBadge variant="success">Success</BBadge>
<BBadge variant="danger">Danger</BBadge>
<BBadge variant="warning">Warning</BBadge>
<BBadge variant="info">Info</BBadge>
<BBadge variant="light">Light</BBadge>
<BBadge variant="dark">Dark</BBadge>
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden
class.
Interactions between Variant props
BBadge
implements bg-variant
and text-variant
to provide finer control of colors, they take precedence over the variant
prop. See the Color Variant Reference for details.
Pill badges
Use the pill
prop to make badges more rounded with a larger border-radius.
<BBadge variant="primary" pill>Primary</BBadge>
<BBadge variant="secondary" pill>Secondary</BBadge>
<BBadge variant="success" pill>Success</BBadge>
<BBadge variant="danger" pill>Danger</BBadge>
<BBadge variant="warning" pill>Warning</BBadge>
<BBadge variant="info" pill>Info</BBadge>
<BBadge variant="light" pill>Light</BBadge>
<BBadge variant="dark" pill>Dark</BBadge>
Actionable badges
Quickly provide actionable badges by specifying either the href
prop (links) or to
prop (router-links):
<BBadge href="#" variant="primary">Primary</BBadge>
<BBadge href="#" variant="secondary">Secondary</BBadge>
<BBadge href="#" variant="success">Success</BBadge>
<BBadge href="#" variant="danger">Danger</BBadge>
<BBadge href="#" variant="warning">Warning</BBadge>
<BBadge href="#" variant="info">Info</BBadge>
<BBadge href="#" variant="light">Light</BBadge>
<BBadge href="#" variant="dark">Dark</BBadge>
Component Reference
<BBadge>
Prop | Type | Default | Description |
---|---|---|---|
bg-variant | ColorVariant | null | null | Applies one of the Bootstrap theme color variants to background of the component |
dot-indicator | boolean | false | Indication position and dot styling applied |
pill | boolean | false | When set to 'true', renders the badge in pill style |
placement | CombinedPlacement | undefined | Placement of the badge relative to the its parent. One of the values of `CombinedPlacement` |
tag | string | 'span' | Specify the HTML tag to render instead of the default tag |
text-variant | TextColorVariant | null | null | Applies one of the Bootstrap theme color variants to the text |
variant | ColorVariant | null | 'secondary' | Applies one of the Bootstrap theme color variants to the component. When implemented `bg-variant` and `text-variant` will take precedence |
Name | Scope | Description |
---|---|---|
default |