--- 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 centered separated Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ## Headings ```html example columns={1} height="20rem" centered

Example heading New

``` ## Outline badges ```html example centered separated 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 1 2 3 4 5 6 7 8 9 10 11 12 ``` ## Links Place the badge within an `` element if you want it to perform the function of a link and make it clickable. ```html example centered separated 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. ``` ``` The results can be seen in the example below. ```html example centered separated ```