# Badges

Badges are a small labelling component that can be used inline with other text or independently.

## Default Badges

By default, badges scale to the size of their parent, and use background utilities to set their coloring. Below are some examples of badges being used with heading elements.

# Example heading New

## Colors

The background utilities used in this theme can be utilized to set the background color of a badge. For proper styling, a text utility may be needed for badges with lighter background colors.

Primary Secondary Success Danger Warning Info Light Dark

## Pill Badges

The rounded, pill effect for badges can be acheived by simply appending the `.badge` class with the `.rounded-pill` border radius utility class.

Primary Secondary Success Danger Warning Info Light Dark

## Integration

The badge component integrates well with the button component to add notifications or small badge alerts to a clickable zone.

### Related Links

Bootstrap Badge Documentation

Bootstrap's badge component documentation

Related Link arrow_upward