Badges
Small labels that communicate important information and encourage user action.
Examples
Badges come in two types, text badges and notification badges. Text badges are purely informational, while notification badges may or may not contain a number to indicate the number of unread messages, notifications, or other important items.
Usage
Use badges sparingly to direct the user's eye towards key actions on the page.
Do:
- use sentence case for badge labels
- keep badge labels short but meaningful, no more than 3 words
- use labels that are easy to understand, that clearly describe exactly what the badge represents
- maintain consistency in how you use badges across your website or app
- to gain insights into how users perceive and interact with badges conduct user research
Avoid:
- avoid using badges to indicate status, such as 'completed'
- use the label component for this
- avoid using too many badges on one screen
- using badges if they might appear in the same area of the page as buttons
Example heading New
Example H2 heading New 1
Example H3 heading New 2
Example H4 heading New 3
Example H5 heading New 5
Example in paragraph New 6
<h2>Example H2 heading <turas-badges-heading>New 1</turas-badges-heading></h2>
<h3>Example H3 heading <turas-badges-heading>New 2</turas-badges-heading></h3>
<h4>Example H4 heading <turas-badges-heading>New 3</turas-badges-heading></h4>
<h5>Example H5 heading <turas-badges-heading>New 5</turas-badges-heading></h5>
<p>Example in paragraph <turas-badges-heading>New 6</turas-badges-heading></p>
<h2>Example H2 heading <span class="badge badge-heading ">New 1</span></h2>
<h3>Example H3 heading <span class="badge badge-heading ">New 2</span></h3>
<h4>Example H4 heading <span class="badge badge-heading ">New 3</span></h4>
<h5>Example H5 heading <span class="badge badge-heading ">New 5</span></h5>
<p>Example in paragraph <span class="badge badge-heading ">New 6</span></p>
<turas-button additional-classes="btn-badge" button-style="Primary">
Inbox
<turas-badges-button>
99+
</turas-badges-button>
</turas-button>
<button class="btn btn-primary btn-badge" type="button">
Inbox
<span class="badge ">
99+
</span>
</button>
<turas-button additional-classes="btn-badge" button-style="Primary">
Reminders
<turas-badges-button></turas-badges-button>
</turas-button>
<button class="btn btn-primary btn-badge" type="button">
Reminders
<span class="badge "></span>
</button>
Optional parameters
- additional-classes - additional CSS classes
- id - the HTML ID attribute
Accessibility status
This component is partially compliant with the WCAG 2.1 standard because of the following non compliances:
- there currently isn't appropriate aria added to this component that would be used to notify screen readers of any change to the content
Testing
- check keyboard navigation to ensure the badges are in expected tab order and doesn't cause a keyboard trap
- check that buttons that are associated with badges can be used with return, enter and space bar to activate them
- test badges with screen readers to ensure they are announced and as expected
Developer considerations
- If there is a live update element to the badge status make sure the appropriate ARIA attribute is used we would recommend using aria-live = "polite" so this will not interfere with more important items on the page
