Skip Navigation

Badges

Badges are a way of making elements in the interface stand out to users. They should be used sparingly to call attention to important status, labels and other indicators warranting attention.

User Notifications

One of the most common badge types is the User Notification Badge, which appears alongside an avatar or icon and serves as a visual cue for items needing the user’s attention. The badge itself may display a count of items or an exclamation point indicating that user action is required.


When to Use

  • To draw attention to information needing the user’s attention when the information, status or count changes based on user action.

When Not to Use

  • Do not use to highlight information that does not change based on user action.

Behavior

On this badge variation, display “99+” to indicate that the number is greater than 99.

Variations

Usage

When to Use a Badge

Badges are best used to communicate a status or count associated with an interface element or data on the screen that changes based on conditions and/or user activity. Information that can be communicated in 1-2 words, a numerical count, or an icon are a good fit for badges; messages that require lengthier text are not.

See Intro to Messages for a comparison of when to use each message type.

Indicating Status within a Badge

Each of the badge variation types may be assigned a status by using the corresponding messaging color.

Neutral Warning Critical Positive
Neutral Warning Critical Positive


Status Types

  • Critical (Red)
  • Warning (Warning Yellow)
  • Positive (Green)
  • Neutral (Slate)

Variations

Tally Badges

Tally badges are used to indicate a count of something that changes based on status or user actions.

When to Use

  • To indicate a count of items when the count changes.
  • Can be used in conjunction with icons or text.

When Not to Use

  • The count being communicated doesn’t change.

Count-Only Badge

This variation is recommended for counts when a lower level of visual prominence is warranted and when it will be clear that the count corresponds to the neighboring text. This variation may appear next to text or a link.

Table Title

Icon Flight No. Departure Time Arrival Time Availability
DL0431

6Seats Available

AA1321

3Seats Available


Count with Text inside the Badge Example

This variation is recommended for counts of items when a stronger level of visual prominence is warranted and when the count and the label are best perceived as a single element.

Table Title

Icon Flight No. Departure Time Arrival Time Availability
DL0431 5 Seats Available
AA1321 8 Seats Available


Count with Icon Example

This variation may be used in conjunction with icons when the number of items related to the icon will change based on status or user actions. Click on the image below to view a coded example.

Count With Icon Coded Example

Informational Badges

Informational badges are used to indicate the presence or availability of something or to highlight a key piece of data warranting strong visual prominence (for example, a value in a KPI bar or a status of a flight). Messaging colors may be used to associate a status with the value.

When to Use

  • To give visual prominence to a data element that requires extra visual prominence.
  • To assign status connotations to a key data element (positive, warning, critical or neutral).

When Not to Use

Text and Numerical Values

Use to give visual prominence to data that changes, such as status indicators or key progress indicators. This badge variation may display popovers or tooltips for additional information.

Table Title

Icon Flight No. Departure Time Arrival Time Status
DL0431 Delayed
AA1321 On-Time


Icon Informational Badges

Use to give visual prominence to an icon representing the presence or status of something that changes. A link or label may appear next to this variation. To view the badge in the example below, click on the Avatar to reveal the Popover that holds the badge.


Developer Notes

Standard Badge with Status

The standard badge is created using the spark-badge class and coupling this with an additional class that determines the status of the badge. The available status classes are spark-badge--neutral, spark-badge--warning, spark-badge--critical, and spark-badge--success.

By default, the standard badge is displayed at a large size, but a smaller variation is available using the spark-badge--sm class.

Neutral Warning Critical Positive
Neutral Warning Critical Positive 
<div class="row spark-mar-b-2">
  <div class="col-xs-12">
    <span class="spark-badge spark-badge--neutral spark-mar-b-1 spark-mar-r-2">Neutral</span>

    <span class="spark-badge spark-badge--warning spark-mar-b-1 spark-mar-r-2">Warning</span>

    <span class="spark-badge spark-badge--critical spark-mar-b-1 spark-mar-r-2">Critical</span>

    <span class="spark-badge spark-badge--success spark-mar-b-1 spark-mar-r-2">Positive</span>

  </div>
</div>

<div class="row">
  <div class="col-xs-12">
    <span class="spark-badge spark-badge--sm spark-badge--neutral spark-mar-b-1 spark-mar-r-2">Neutral</span>

    <span class="spark-badge spark-badge--sm spark-badge--warning spark-mar-b-1 spark-mar-r-2">Warning</span>

    <span class="spark-badge spark-badge--sm spark-badge--critical spark-mar-b-1 spark-mar-r-2">Critical</span>

    <span class="spark-badge spark-badge--sm spark-badge--success spark-mar-b-1 spark-mar-r-2">Positive</span>
  </div>
</div>

<style type="text/css">
  
</style>

Note that the examples above utilize CSS helper classes to assist with spacing and are not necessary for use with badges.

User Notification Badges

User notification badges are created using the spark-badge--notification class and an associated color class. The available color classes are spark-badge--notification__neutral, spark-badge--notification__critical, spark-badge--notification__warning and spark-badge--notification__success. An additional class of spark-badge--notification__light is also available for use as a neutral variation when the notification badge is used with a Text Avatar in the Header.

Avatar

User notification badges applied to Avatars should be placed inside the spark-avatar element container. This is to allow the correct positioning of the badge.

<div class="row">
  <div class="col-xs-12 col-md-3 col-lg-2 spark-mar-b-2--lte-sm">
    <a href="" class="spark-avatar spark-avatar--text" aria-label="Laurence Traveler" aria-describedby="message1">
      LT
      <span id="message1" class="spark-badge--notification spark-badge--notification__light" aria-label="23 messages">23</span>
    </a>
  </div>

  <div class="col-xs-12 col-md-3 col-lg-2 spark-mar-b-2--lte-sm">
    <a href="" class="spark-avatar spark-avatar--image">
      <img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/avatars/profile-pic.jpg" alt="Guy Wolfe" aria-describedby="message2"/>
      <span id="message2" class="spark-badge--notification spark-badge--notification__critical" aria-label="23 unread messages">23</span>
    </a>
  </div>

  <div class="col-xs-12 col-md-3 col-lg-2 spark-mar-b-2--lte-sm">
    <a href="" class="spark-avatar spark-avatar--image">
      <img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/avatars/profile-pic.jpg" alt="Guy Wolfe" aria-describedby="message3"/>
      <span id="message3" class="spark-badge--notification spark-badge--notification__critical" aria-label="120 unread messages">99+</span>
    </a>
  </div>
</div>

<style type="text/css">
  
</style>

Icon Notifications

User notification badges can also be applied to the Icon Buttons. Once again, the spark-badge--notification element should be placed inside the button element. A class of spark-badge--icon is also required on the button element to allow for the correct positioning of the badge.

<div class="row">
  <div class="col-xs-12 col-sm-3 spark-mar-b-2--xs">
    <button class="spark-btn--icon spark-icon spark-icon-cog spark-badge--icon" aria-label="Settings" aria-describedby="message0">
      <span id="message0" class="spark-badge--notification spark-badge--notification__neutral" aria-label="2 items">2</span>
    </button>
  </div>

  <div class="col-xs-12 col-sm-3 spark-mar-b-2--xs">
    <button class="spark-btn--icon spark-icon spark-icon-bell spark-badge--icon" aria-label="Notifications" aria-describedby="message1">
      <span id="message1" class="spark-badge--notification spark-badge--notification__neutral" aria-label="2 items">2</span>
    </button>
  </div>

  <div class="col-xs-12 col-sm-3 spark-mar-b-2--xs">
    <button class="spark-btn--icon spark-icon spark-icon-shopping-cart spark-badge--icon" aria-label="Shopping Cart" aria-describedby="message2">
      <span id="message2" class="spark-badge--notification spark-badge--notification__neutral" aria-label="2 items">2</span>
    </button>
  </div>
</div>

<style type="text/css">
  
</style>

Tally Badges

Tally Badges are similar to Standard badges but will have a numerical count as part of the badge label.

6 Seats Available 3 Gyms
6 Seats Available 3 Gyms 
<div class="row spark-mar-b-2">
  <div class="col-xs-12">
    <span class="spark-badge spark-badge--neutral spark-mar-b-1 spark-mar-r-2">6 Seats Available</span>

    <span class="spark-badge spark-badge--neutral"><i class="spark-icon spark-icon--fill spark-icon-hotel-gym spark-mar-r-1" aria-hidden="true"></i>3 Gyms</span>
  </div>
</div>

<div class="row">
  <div class="col-xs-12">
    <span class="spark-badge spark-badge--sm spark-badge--neutral spark-mar-b-1 spark-mar-r-2">6 Seats Available</span>

    <span class="spark-badge spark-badge--sm spark-badge--neutral"><i class="spark-icon spark-icon--fill spark-icon-hotel-gym spark-mar-r-1" aria-hidden="true"></i>3 Gyms</span>
  </div>
</div>

<style type="text/css">
  
</style>

Note that the examples above utilize CSS helper classes to assist with spacing and are not necessary for use with badges.

Informational Badges

Informational badges are created in a similar manner to Tally and Standard badges and can be combined with Tooltips or Popovers.

6 8
$23,000
$23,000 
<div class="row spark-mar-b-2">
  <div class="col-xs-12">
    <span class="spark-badge spark-badge--neutral spark-mar-r-2">6</span>

    <span class="spark-badge spark-badge--critical spark-mar-r-2">8</span>
  </div>
</div>

<div class="row spark-mar-b-2">
  <div class="col-xs-12">
    <span tabindex="0" class="spark-badge spark-badge--neutral spark-tooltip" aria-expanded="false" aria-describedby="tooltip1">
      $23,000
      <span id="tooltip1" class="spark-tooltip__content--right" role="tooltip">
        Itinerary cost
        <span class="spark-tooltip__caret"></span>
      </span>
    </span>
  </div>
</div>

<div class="row spark-mar-b-2">
  <div class="col-xs-12">
    <span tabindex="0" class="spark-badge spark-badge--sm spark-badge--warning spark-tooltip" aria-expanded="false" aria-describedby="tooltip2">
      $23,000
      <span id="tooltip2" class="spark-tooltip__content--right" role="tooltip">
        Itinerary cost
        <span class="spark-tooltip__caret"></span>
      </span>
    </span>
  </div>
</div>

<div class="row spark-mar-b-2">
  <div class="col-xs-12">
    <span class="spark-popover spark-inline-block">
      <span tabindex="0" class="spark-badge spark-badge--success spark-popover__toggle">$23,000</span>
      <div class="spark-popover__content" role="tooltip" data-anchor-x="center" data-anchor-y="bottom">
        <p class="spark-mar-b-0">This particular item is<br /> extremely overpriced.</p>
        <span class="spark-popover__caret"></span>
      </div>
    </span>
  </div>
</div>

<div class="row">
  <div class="col-xs-12">
    <span class="spark-popover spark-inline-block">
      <span tabindex="0" class="spark-badge spark-badge--sm spark-badge--critical spark-popover__toggle">$23,000</span>
      <div class="spark-popover__content" role="tooltip" data-anchor-x="center" data-anchor-y="bottom">
        <p class="spark-mar-b-0">This particular item is<br /> extremely overpriced.</p>
        <span class="spark-popover__caret"></span>
      </div>
    </span>
  </div>
</div>

<style type="text/css">
  
</style>

Accessibility Notes

User Notification Badges

When applying a User Notification Badge to text or image Avatars, more descriptive text should be provided to screen-readers and assistive devices to make the context of the badge clearer, and to create the association between the badge and the avatar.

In the case of the text avatar, an aria-label attribute is required on the avatar to provide the full length name of the user or a description of what the abbreviations stand for. An aria-describedby attribute is also added to indicate which element, in this case the badge, provides additional details. The badge itself also contains an aria-label attribute to describe in detail the meaning behind the numerical count.

<a href="" class="spark-avatar spark-avatar--text" aria-label="Joy Thomas" aria-describedby="message1">
  JT
  <span id="message1" class="spark-badge--notification spark-badge--notification__neutral-light" aria-label="23 messages">23</span>
</a>

In the case of the image avatar, ensure that an alt attribute is provided for the image used. As with the text avatar, an aria-describedby attribute is set on the image and an aria-label provided for the badge element.

<a href="#" class="spark-avatar spark-avatar--image">
  <img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/badges/profile-pic.jpg" alt="Guy Wolfe" aria-describedby="message2"/>
  <span id="message2" class="spark-badge--notification spark-badge--notification__actionable" aria-label="23 unread messages">23</span>
</a>

The principles above apply to notifications used with Icon Buttons as well as Links.

Tally Badges

When using Tally Badges with icons, it might be necessary to provide a text alternative to the icon via an aria-label attribute or to hide the icon from assistive technologies using an aria-hidden attribute if the text within the badge is sufficient.

<span class="spark-badge spark-badge--neutral"><i class="spark-icon spark-icon--fill spark-icon-hotel-gym spark-mar-r-1" aria-hidden="true"></i>3 Gyms</span>

Informational Badges

Informational badges with icons will follow the same Accessibility principles as Tally badges above.

For guidelines on how to make Badges with Tooltips or Popovers accessible, refer to the Accessibility tab under Tooltips and the Accessibility tab under Popovers.