4.4 KiB
title, summary, description, bootstrapLink
| title | summary | description | bootstrapLink |
|---|---|---|---|
| Badges | 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. | Add extra information with badges. | components/badge/ |
Default markup
The default badges are square and come in the basic set of colors.
{% capture html -%} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan {%- endcapture %} {% include "docs/example.html" html=html centered %}
Headings
{% capture html -%}
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
{%- endcapture %} {% include "docs/example.html" html=html %}Outline badges
{% capture html -%} blue azure indigo purple pink red orange yellow lime green teal cyan {%- endcapture %} {% include "docs/example.html" html=html centered %}
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.
{% capture html -%} 1 2 3 4 5 6 7 8 9 10 11 12 {%- endcapture %} {% include "docs/example.html" html=html centered %}
Links
Place the badge within an <a> element if you want it to perform the function of a link and make it clickable.
{% capture html -%} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan {%- endcapture %} {% include "docs/example.html" html=html centered %}
Button with badge
Badges can be used as part of links or buttons to provide a counter.
<button type="button" class="btn">
Notifications <span class="badge bg-red-lt ms-2">4</span>
</button>
The results can be seen in the example below.
{% capture html -%} Notifications 4 Notifications 4 {%- endcapture %} {% include "docs/example.html" html=html centered %}