Open In App

Bootstrap 5 Badges Buttons

Improve
Improve
Like Article
Like
Save
Share
Report

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=
          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:

Bootstrap 5 Badges Buttons

Bootstrap 5 Badges Buttons

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=
          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:

Bootstrap 5 Badges Buttons

Bootstrap 5 Badges Buttons

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



Last Updated : 15 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads