Government of
India
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.1, 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>
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>
RESULT
Background colors #
Added in v1.0.1Using 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-hiddenclass.
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
CSS #
Variables #
Added in v1.0.1
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;