# Badges

###### Small and adaptive tag for adding context to just about any content.

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.

Learn more about this component on bootstrap's official documentation

## Badge scaling

Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units

##### Badge Scaling Examples

# Example heading New

## Badge in buttons

Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units

##### Regular buttons

##### Outline buttons

## Icon badges

Use utility classes with `.btn-icon` to place the badge
9 unread messages 18 unread messages 99 unread messages 100.. unread messages
16 unread messages 4 unread messages 4 unread messages 99+ unread messages
4 unread messages 0 unread messages 7 unread messages 4 unread messages

## Status badges

These badges are unique and triggered by wrapping an element with `.status` class. Comes with three badge sizes `.status-sm`, `.status-xs` and the default `.status`. Comes in 3 colors, `.status-danger`, `.status-warning`, and `.status-success`

## Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.
Primary Secondary Success Danger Warning Info Light Dark
Border utility
Primary Secondary Success Danger Warning Info Light Dark

## Pill badges

Use the `.badge-pill` modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).
Primary Secondary Success Danger Warning Info Light Dark

## Links example

Add `.badge-*` class on a hyperlink element to convert it to actionable badges with hover and focus states
Link Badge - Primary Link Badge - Secondary Link Badge - Success Link Badge - Danger Link Badge - Warning Link Badge - Info Link Badge - Light Link Badge - Dark

## Nested badge

Use the included color utilities to change background and text colors. Below are examples of nested badge with different background colors
Nested Badge 1 Nested Badge 2 99+

## Badge header

We use `.badge-icon` with a combination of other utility classes to create a link badge. This class will auto turncate overflow giving you a nice clean look without any hassle
I am a large text 9999
I am smaller text 9999
I am normal text 9999
11 17 11 17

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode