package.docs.components.badges.mdx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of core Show documentation

Premium and Open Source dashboard template with responsive and high quality UI.

The newest version!

---
title: Badges
description: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
bootstrapLink: components/badge/
---

## Default markup

The default badges are square and come in the basic set of colors.

```html code example vertical centered separated scrollable height="15rem"
Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan
```

## Headings

```html code example height="240px"
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
```

## Outline badges

```html code example vertical centered separated scrollable height="15rem"
blue
azure
indigo
purple
pink
red
orange
yellow
lime
green
teal
cyan
```

## Pill badges

Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.

```html code example centered separated height="7rem"
1
2
3
4
5
6
7
8
9
10
11
12
```

## Soft color badges

You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](colors) to see the list of available colors and choose ones that best suit your design.

```html code example vertical centered separated scrollable height="15rem"
Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan
```

## Links

Place the badge within an `` element if you want it to perform the function of a link and make it clickable.

```html code example vertical centered separated scrollable height="15rem"
Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan
```

## Button with badge

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

```html example centered separated height="7rem"


```

```html


```