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.
<!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
Example 2: Here is an example of a badge in which the button with a colored notification badge.
<!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
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