Bootstrap 5 Badges Buttons

Last Updated : 15 Nov, 2022

Bootstrap 5 comes with a Badges component which shows the additional, latest information and labels to any element. Along with the normal sentences, Badges can be implemented inside the button element also, to show any link or notification counter. In this article, we will see the use of Badges on Buttons by using the badges class on Buttons.

Prerequisite: Bootstrap 5 Buttons

Badges Buttons Class:

badge: The badge class is used to show the small count or notification dot.

Syntax

<button type="button" class="btn ...">
     ... <span class="badge ...">...</span>
</button>

Example 1: This is an example to show notification count inside the buttons, but there will be no color on the badges.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <title>Bootstrap 5 Badges Buttons</title>
</head>

<body>
    <center>
        <h1 class="text-success">
            GeeksforGeeks</h1>
        <strong>
            Bootstrap 5 Badges Buttons
        </strong>
        <br><br>
        <button type="button" class="btn btn-primary">
            Published Articles
            <!-- badge class is used -->
            <span class="badge">7</span>
        </button>

        <button type="button" class="btn btn-primary">
            Pending Articles
            <!-- badge class is used -->
            <span class="badge">2</span>
        </button>
    </center>

</body>

</html>

Output:

Example 2: Here is an example of a badge in which the button with a colored notification badge.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <title>Bootstrap 5 Badges Buttons</title>
</head>

<body>
    <center>
        <h1 class="text-success">
            GeeksforGeeks</h1>
        <strong>
            Bootstrap 5 Badges Buttons
        </strong>
        <br><br>
        <button type="button" class="btn btn-primary">
            Published Articles
            <!-- badge class is used with background color-->
            <span class="badge bg-success">7</span>
        </button>

        <button type="button" class="btn btn-primary">
            Pending Articles
            <!-- badge class is used with background color-->
            <span class="badge bg-danger">2</span>
        </button>
    </center>

</body>

</html>

Output:

Note: The purpose of Bootstrap Badges is to give a visual sign of information. So the ordinary user can understand it with ease. But for the users who can't see and use screen readers or some assistive technology, Badges would appear like a random text after the sentence end.

Reference: https://getbootstrap.com/docs/5.0/components/badge/#buttons

Bootstrap 5 Badges Background colors

user282

Improve

Article Tags :

Bootstrap 5 Badges Buttons

Similar Reads

Accordion Component

Badges Component

Breadcrumb Component

Button group Component

Close button Component

Collapse Component

Offcanvas Component

Progress Component

Scrollspy Component

Spinners Component

Thank You!

What kind of Experience do you want to share?