Powered by NeGD | MeitY Government of India® UX4G
Badges
Documentation and examples for badges, our small count and labeling component.
Examples #
Using relative font sizes and em units, badges resize to the size of the immediate parent element. Since version v1.0.2, links on badges no longer have focus or hover styles.
<div class="bd-example"><h1>Example heading <span class="badge bg-secondary">New</span></h1><h2>Example heading <span class="badge bg-secondary">New</span></h2><h3>Example heading <span class="badge bg-secondary">New</span></h3><h4>Example heading <span class="badge bg-secondary">New</span></h4><h5>Example heading <span class="badge bg-secondary">New</span></h5><h6>Example heading <span class="badge bg-secondary">New</span></h6></div>
RESULT
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Buttons #
To add a counter, badges can be a component of links or buttons.
<div class="bd-example"><button type="button" class="btn btn-primary">Notifications <span class="badge text-bg-secondary">4</span></button></div><div class="bd-example mt-10"> <button type="button" class="btn btn-success position-relative">Cart <span class="position-absolute top-0 start-100 translate-middle badge rounded-circle text-bg-danger">8</span></button> </div>
RESULT
Take note that badges may be perplexing for users of screen readers and other similar assistive tools, depending on how they are employed. These users will only see the badge's content, despite the fact that badges' style provide a visual signal as to what they are for. These badges may appear to be random words or numbers added at the end of a statement, link, or button, depending on the circumstances.
Consider including more context using a visually hidden piece of additional text unless the context is obvious (like in the "Notifications" example, where it is recognized that the "4" represents the number of notifications).
Positioned #
Use utilities to modify a .badge
and position it in
the corner of a link or button.
<div class="bd-example"><button type="button" class="btn btn-primary position-relative">Inbox<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">99<span class="visually-hidden">unread messages</span></span></button></div>
RESULT
You can also replace the .badge
class
with a few more utilities without a count for a more generic
indicator.
<button type="button" class="btn btn-primary position-relative"> Profile <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"> <span class="visually-hidden">New alerts</span> </span></button>
<button type="button" class="btn btn-primary position-relative ml-10">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle">
<span class="visually-hidden">Small badge</span>
</span>
</button>
RESULT
Background colors #
Added in v1.0.2Using the .text-bg-color
tools, there is a possibility to set background color with a contrasting foreground color. Previously, pairing the preferred .text-color
and .bg-color utilities manually was necessary for styling; nevertheless, still free to do so if preferred.
<div class="bd-example"><span class="badge text-bg-primary">Primary</span><span class="badge text-bg-secondary">Secondary</span><span class="badge text-bg-success">Success</span><span class="badge text-bg-danger">Danger</span><span class="badge text-bg-warning">Warning</span><span class="badge text-bg-info">Info</span><span class="badge text-bg-light">Light</span><span class="badge text-bg-dark">Dark</span></div>
RESULT
Conveying meaning to assistive technologies
Color-coding to add meaning just gives a visual cue, which users of assistive technologies like screen readers won't be able to understand. Make sure the information the color designates is either evident from the content itself (such as the visible text) or is included in another way, such as by hiding additional text using the.visually-hidden
class.
Pill badges #
Use the .rounded-pill
utility class to make badges
more rounded with a larger border-radius.
<div class="bd-example"><span class="badge rounded-pill text-bg-primary">Primary</span><span class="badge rounded-pill text-bg-secondary">Secondary</span><span class="badge rounded-pill text-bg-success">Success</span><span class="badge rounded-pill text-bg-danger">Danger</span><span class="badge rounded-pill text-bg-warning">Warning</span><span class="badge rounded-pill text-bg-info">Info</span><span class="badge rounded-pill text-bg-light">Light</span><span class="badge rounded-pill text-bg-dark">Dark</span></div>
RESULT
Avatars#
Use the .rounded-circle utility class to make avatars more rounded with a larger border-radius.
<div class="rounded-circle avatars avatars-xs d-flex align-items-center justify-content-center position-relative">
<img class="rounded-circle" src="https://img.freepik.com/premium-photo/beautiful-asian-student-girl-with-smiling-face-ai-generated_836063-589.jpg?w=360" alt="Avatars" />
<span class="position-absolute bottom-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle"><span class="visually-hidden">Avatars xs</span></span>
</div>
<div class="rounded-circle avatars avatars-sm d-flex align-items-center justify-content-center position-relative">
<img class="rounded-circle" src="https://img.freepik.com/premium-photo/beautiful-asian-student-girl-with-smiling-face-ai-generated_836063-589.jpg?w=360" alt="Avatars" />
<span class="position-absolute bottom-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle"><span class="visually-hidden">Avatars sm</span></span>
</div>
<div class="rounded-circle avatars avatars-md d-flex align-items-center justify-content-center position-relative">
<img class="rounded-circle" src="https://img.freepik.com/premium-photo/beautiful-asian-student-girl-with-smiling-face-ai-generated_836063-589.jpg?w=360" alt="Avatars" />
<span class="position-absolute bottom-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle"><span class="visually-hidden">Avatars md</span></span>
</div>
<div class="rounded-circle avatars avatars-lg d-flex align-items-center justify-content-center position-relative">
<img class="rounded-circle" src="https://img.freepik.com/premium-photo/beautiful-asian-student-girl-with-smiling-face-ai-generated_836063-589.jpg?w=360" alt="Avatars" />
<span class="position-absolute bottom-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle"><span class="visually-hidden">Avatars lg</span></span>
</div>
RESULT
Use the .rounded utility class to make avatars.
<div class="rounded avatars avatars-xs d-flex align-items-center justify-content-center position-relative">
<img class="rounded" src="https://img.freepik.com/premium-photo/beautiful-asian-student-girl-with-smiling-face-ai-generated_836063-589.jpg?w=360" alt="Avatars" />
<span class="position-absolute bottom-7 start-100 translate-middle p-1 bg-success border border-light rounded-circle"><span class="visually-hidden">avatars xs</span></span>
</div>
<div class="rounded avatars avatars-sm d-flex align-items-center justify-content-center position-relative">
<img class="rounded" src="https://img.freepik.com/premium-photo/beautiful-asian-student-girl-with-smiling-face-ai-generated_836063-589.jpg?w=360" alt="Avatars" />
<span class="position-absolute bottom-7 start-100 translate-middle p-1 bg-success border border-light rounded-circle"><span class="visually-hidden">avatars sms</span></span>
</div>
<div class="rounded avatars avatars-md d-flex align-items-center justify-content-center position-relative">
<img class="rounded" src="https://img.freepik.com/premium-photo/beautiful-asian-student-girl-with-smiling-face-ai-generated_836063-589.jpg?w=360" alt="Avatars" />
<span class="position-absolute bottom-7 start-100 translate-middle p-1 bg-success border border-light rounded-circle"><span class="visually-hidden">avatars md</span></span>
</div>
<div class="rounded avatars avatars-lg d-flex align-items-center justify-content-center position-relative">
<img class="rounded" src="https://img.freepik.com/premium-photo/beautiful-asian-student-girl-with-smiling-face-ai-generated_836063-589.jpg?w=360" alt="Avatars" />
<span class="position-absolute bottom-7 start-100 translate-middle p-1 bg-success border border-light rounded-circle"><span class="visually-hidden">avatars lgs</span></span>
</div>
RESULT
CSS #
Variables #
Added in v1.0.2
As part of UX4G's evolving approach to CSS variables for better real-time customizing, badges now use local CSS variables on .badge
. Sass customization is still possible because it is used to set the values for the CSS variables.
--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};
Sass variables #
$badge-font-size: .75em;
$badge-font-weight: $font-weight-bold;
$badge-color: $white;
$badge-padding-y: .35em;
$badge-padding-x: .65em;
$badge-border-radius: $border-radius;