Badges
Work in progress
This page is a work in progress.
Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).
Purpose
Use badges (numerical indicators) to highlight the number of updates, new or unread items associated with a link.
Design and coding
Basic use
Default
Use to highlight new or updated items with a simple grey numeric, or blue button-like badge.
Correct use
Compliance point(s):
- Place
.badgeon the right side of the link - Ensure the badge is dynamic, in that once items are actioned, the numeric value goes down
- Ensure it contains only numerical information
- Ensure the badge includes invisible text to make it descriptive. For example:
<p><a href="#">Inbox <span class="badge">42<span class="wb-inv"> unread emails</span></span></a></p>
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
- Do not show there are zero "0" items; if there are no items, the badge should disappear
Code
// Grey badge:
<p><a href="#">Inbox <span class="badge">42<span class="wb-inv"> unread emails</span></span></a></p>
// Blue button-like badge:
<p><a class="btn btn-primary" href="#">Inbox <span class="badge">42<span class="wb-inv"> unread emails</span></span></a></p>Enhanced use
Self collapsing badges
Use when there are no new or unread items. Badges simply collapse (via CSS :empty selector).
Cross-browser compatibility
Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.
Appearance
Correct use
Compliance point(s):
- Remove the content within the badge and it will self-collapse, rather than removing the badge
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// No content inside badge:
<p><a href="#">... <span class="badge"></span></a></p>Add-on features
Additional add-on features and behaviours are available.
Some of the code and documentation for this page is sourced from Bootstrap (external link)
- Date modified: