Badges

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

Copy


    
    <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>

Copy


    
    <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>

Copy


    <turas-button additional-classes="btn-badge" button-style="Primary">
        Inbox
        <turas-badges-button>
            99+
        </turas-badges-button>
    </turas-button>

Copy


    <button class="btn btn-primary btn-badge" type="button">
        Inbox
        <span class="badge ">
            99+
        </span>
    </button>

Copy


    <turas-button additional-classes="btn-badge" button-style="Primary">
        Reminders
        <turas-badges-button></turas-badges-button>
    </turas-button>

Copy


    <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

Blockquote

Examples

Usage

Example heading New

Example H2 heading New 1

Example H3 heading New 2

Example H4 heading New 3

Example H5 heading New 5

Optional parameters

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Research user journeys

Was this page helpful?