--- title: Badges summary: 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. description: Add extra information with badges. bootstrapLink: components/badge/ --- ## Default markup The default badges are square and come in the basic set of colors. ```html example vertical centered separated scrollable height="15rem" Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ## Headings ```html example height="240px"

Example heading New

``` ## Outline badges ```html 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 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](/docs/ui/base/colors) to see the list of available colors and choose ones that best suit your design. ```html 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 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 ```