Badge
Badge is a small status indicator for another element.
When to use
- Badges are numerical indicators and used to highlight a count of an element.
- Badges can be used as part of links or buttons to provide a counter.
- It enhances the component to which it is attached with additional information.
Guidelines
- Badges can be used against both icons and text.
- Badges use a solid color for text with a white background and a solid colored border.
- By default, icon badges will display a maximum number of 99, after which a '99+' label is used. This behavior can be overridden if needed.
- Badges can expand in width to display larger numbers.
Basic
The basic badges are read-only status indicators/labels that are not interactive.
2
<span class="badge" role="img" aria-label="Badge 2">2</span>
Directive
Badge has been added using span tag.
2
<i class="ds ds-user badge-overlay">
<span class="position-absolute top-0 badge" role="img" aria-label="Badge 2"> 2 </span>
</i>
Severity
Badge severity is defined with classes.
2
9
3
12
<span class="badge badge-success" role="img" aria-label="Success badge 2">2</span>
<span class="badge badge-info" role="img" aria-label="Info badge 9">9</span>
<span class="badge badge-warning" role="img" aria-label="Warning badge 3">3</span>
<span class="badge badge-danger" role="img" aria-label="Danger badge">12</span>
Size
Badge sizes are adjusted with the size that accepts large(badge-lg) and xlarge(badge-xl) as the possible alternatives to the default size.
2
4
6
<span class="badge badge-success" role="img" aria-label="Success Badge 2">2</span>
<span class="badge badge-info badge-lg" role="img" aria-label="Info Badge 4">4</span>
<span class="badge badge-warning badge-xl" role="img" aria-label="Warning Badge 6">6</span>
Position
Badge is always positioned at the top right corner of an element by adding class="position-absolute top-0 badge”
2
10+
<i class="ds ds-user badge-overlay me-4">
<span class="position-absolute top-0 badge" role="img" aria-label="Badge 2"> 2 </span>
</i>
<i class="ds ds-user badge-overlay me-4">
<span class="position-absolute top-0 badge" role="img" aria-label="Badge 10+"> 10+ </span>
</i>
<i class="ds ds-user badge-overlay me-4">
<span class="position-absolute top-0 badge dot-badge" role="img" aria-label="Badge Dot"></span>
</i>
Accessibility
- Badges can be confusing for screen reader and assistive technologies users depending on how it can be used. For some users, the badges may appear as random numbers. To make it more accessible:
- Make the context clear.
- For icons with badges:
- The aria-hidden ="true" attribute is added to the icon so screen readers will ignore it.
- The 'Text' component property will set a text alternative.
- The 'Text' component property will set the title attribute on the icon to provide a tooltip for sighted users.
- The tooltip should be accessible to both mouse and keyboard only users.
- For badges with color, provide the context for screen reader users and other visually impaired users. For example, including the text of what the colors denote, e.g. "overdue tasks" via the 'Text' component property. This will add the title attribute to the ' text' value.
NOTE: Badges when operated with arrow keys , the content/text is readable but the tooltip that appears is not readable.