## Badges

###### Basic Example

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

# Heading 01 New

## Heading 02 New

### Heading 03 New

#### Heading 04 New

##### Heading 05 New

###### Heading 06 New

###### 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

###### Pill Badges

Use the `.bg-pill` modifier class to make badges more rounded.

Primary Secondary Success Danger Warning Info Light Dark

###### Buttons With Badges

Badges can be used as part of links or buttons to provide a counter.

###### Link Badges

Using the contextual badge classes on an element quickly provide actionable badges with hover and focus states.

Primary Secondary Success Danger Warning Info Light Dark

###### Project Status

1

###### Project Planning

100% Completed
1

###### Project Desiging

100% Completed
4/6

###### Project Development

76% Progress
1/5

###### Project Testing

Waiting