mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
f2e182dedf
Co-authored-by: Mustafa Ateş Uzun <mustafauzun0@gmail.com> Co-authored-by: Aditi Deshpande <aditideshpande2908@gmail.com> Co-authored-by: Bartłomiej Gawęda <bgaweda@abis.krakow.pl>
130 lines
5.1 KiB
Plaintext
130 lines
5.1 KiB
Plaintext
---
|
|
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/
|
|
---
|
|
|
|
## Table of content
|
|
|
|
## Default markup
|
|
|
|
The default badges are square and come in the basic set of colors.
|
|
|
|
```html code example vertical centered separated scrollable height="15rem"
|
|
<span class="badge bg-blue">Blue</span>
|
|
<span class="badge bg-azure">Azure</span>
|
|
<span class="badge bg-indigo">Indigo</span>
|
|
<span class="badge bg-purple">Purple</span>
|
|
<span class="badge bg-pink">Pink</span>
|
|
<span class="badge bg-red">Red</span>
|
|
<span class="badge bg-orange">Orange</span>
|
|
<span class="badge bg-yellow">Yellow</span>
|
|
<span class="badge bg-lime">Lime</span>
|
|
<span class="badge bg-green">Green</span>
|
|
<span class="badge bg-teal">Teal</span>
|
|
<span class="badge bg-cyan">Cyan</span>
|
|
```
|
|
|
|
## Headings
|
|
|
|
```html code example height="240px"
|
|
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
|
|
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
|
|
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
|
|
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
|
|
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
|
|
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
|
|
```
|
|
|
|
## Outline badges
|
|
|
|
```html code example vertical centered separated scrollable height="15rem"
|
|
<span class="badge badge-outline text-blue">blue</span>
|
|
<span class="badge badge-outline text-azure">azure</span>
|
|
<span class="badge badge-outline text-indigo">indigo</span>
|
|
<span class="badge badge-outline text-purple">purple</span>
|
|
<span class="badge badge-outline text-pink">pink</span>
|
|
<span class="badge badge-outline text-red">red</span>
|
|
<span class="badge badge-outline text-orange">orange</span>
|
|
<span class="badge badge-outline text-yellow">yellow</span>
|
|
<span class="badge badge-outline text-lime">lime</span>
|
|
<span class="badge badge-outline text-green">green</span>
|
|
<span class="badge badge-outline text-teal">teal</span>
|
|
<span class="badge badge-outline text-cyan">cyan</span>
|
|
```
|
|
|
|
## 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"
|
|
<span class="badge badge-pill bg-blue">1</span>
|
|
<span class="badge badge-pill bg-azure">2</span>
|
|
<span class="badge badge-pill bg-indigo">3</span>
|
|
<span class="badge badge-pill bg-purple">4</span>
|
|
<span class="badge badge-pill bg-pink">5</span>
|
|
<span class="badge badge-pill bg-red">6</span>
|
|
<span class="badge badge-pill bg-orange">7</span>
|
|
<span class="badge badge-pill bg-yellow">8</span>
|
|
<span class="badge badge-pill bg-lime">9</span>
|
|
<span class="badge badge-pill bg-green">10</span>
|
|
<span class="badge badge-pill bg-teal">11</span>
|
|
<span class="badge badge-pill bg-cyan">12</span>
|
|
```
|
|
|
|
## 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"
|
|
<span class="badge bg-blue-lt">Blue</span>
|
|
<span class="badge bg-azure-lt">Azure</span>
|
|
<span class="badge bg-indigo-lt">Indigo</span>
|
|
<span class="badge bg-purple-lt">Purple</span>
|
|
<span class="badge bg-pink-lt">Pink</span>
|
|
<span class="badge bg-red-lt">Red</span>
|
|
<span class="badge bg-orange-lt">Orange</span>
|
|
<span class="badge bg-yellow-lt">Yellow</span>
|
|
<span class="badge bg-lime-lt">Lime</span>
|
|
<span class="badge bg-green-lt">Green</span>
|
|
<span class="badge bg-teal-lt">Teal</span>
|
|
<span class="badge bg-cyan-lt">Cyan</span>
|
|
```
|
|
|
|
## Links
|
|
|
|
Place the badge within an `<a>` 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"
|
|
<a href="#" class="badge bg-blue">Blue</a>
|
|
<a href="#" class="badge bg-azure">Azure</a>
|
|
<a href="#" class="badge bg-indigo">Indigo</a>
|
|
<a href="#" class="badge bg-purple">Purple</a>
|
|
<a href="#" class="badge bg-pink">Pink</a>
|
|
<a href="#" class="badge bg-red">Red</a>
|
|
<a href="#" class="badge bg-orange">Orange</a>
|
|
<a href="#" class="badge bg-yellow">Yellow</a>
|
|
<a href="#" class="badge bg-lime">Lime</a>
|
|
<a href="#" class="badge bg-green">Green</a>
|
|
<a href="#" class="badge bg-teal">Teal</a>
|
|
<a href="#" class="badge bg-cyan">Cyan</a>
|
|
```
|
|
|
|
## Button with badge
|
|
|
|
Badges can be used as part of links or buttons to provide a counter.
|
|
|
|
```html example centered separated height="7rem"
|
|
<button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span></button>
|
|
<button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span></button>
|
|
```
|
|
|
|
```html
|
|
<button type="button" class="btn">
|
|
Notifications <span class="badge bg-red ms-2">4</span>
|
|
</button>
|
|
<button type="button" class="btn">
|
|
Notifications <span class="badge bg-green ms-2">4</span>
|
|
</button>
|
|
```
|