View on GitHub

Badges

Badges are used to display notifications, item counts, or status indicators on navigation elements or icons. They help draw attention to updates, alerts, or changes that require user awareness or action, without disrupting the overall interface.

On this page

Component design version:

  • Badge v1.2.0

You can find here the OUDS Badge design guidelines.

Overview

Component types

  • Badge is used for status indicator.
  • Badge - Count adds a number to notifications for example.
  • Badge - Icon adds an icon to reinforce the badge meaning.

For the three types of badge, OUDS Web has a common basic .badge class that sets up default styles.

<p class="badge"><span class="visually-hidden">Beware</span></p>

1

<p class="badge badge-count">1<span class="visually-hidden">error</span></p>

<p class="badge">
  <span class="badge-status-icon"></span>
  <span class="visually-hidden">Beware</span>
</p>

Accessibility

Semantics

For accessibility reasons, any informative element, must either be a semantic element itself or be wrapped in an appropriate semantic HTML element. In the examples below, the badges, badges - count and badges - icon appear as <p> or inside <p> elements. You may use any semantic element that best fits the context.

Information for visually impaired users

Keep in mind that visually impaired and blind users will lack the visual context (color and/or icons) that permits to understand the badges purpose on the page. For example colorblind people cannot differentiate colors between them, and may need an icon to understand the meaning. In most cases, it is mandatory to add a .visually-hidden information to explain what it represents for screen reader users.

Several examples are provided below, but they need to be adapted for actual use cases.

Badge

The badge is a small UI element used to highlight categories, presence, or draw attention to certain elements within an interface. Default badge carries a negative functional status.

If the context does not allow visually impaired or blind users to understand the meaning, add a .visually-hidden text associated with the badge. Read more about badges accessibility here.

Beware

<p class="badge badge-count"><span class="visually-hidden">Beware</span></p>
<p class="d-flex align-items-center">Beware<span class="badge ms-2xsmall"></span></p>
html

Variants

Status

Non-functional

Non-functional badges are used to display neutral or accent information without carrying a specific functional meaning (unlike functional badges, see below).

<p class="badge badge-neutral"><span class="visually-hidden">To be noted</span></p>
<p class="badge badge-accent"><span class="visually-hidden">Important</span></p>
html
Functional

Functional badges carry a clear meaning related to the status of an object or system. They help the user quickly understand the status of an element and take action if needed.

Keep in mind that color should not be the only way to convey information. Functional badges, which have a strong meaning, should not be combined, because some users cannot differentiate colors between them, for example colorblind people. In this case, it is preferable to use an icon as a second way to convey information, associated with a .visually-hidden text (required for screen reader users). Read more about badges accessibility here.

<p class="badge badge-positive"><span class="visually-hidden">Success</span></p>
<p class="badge badge-info"><span class="visually-hidden">Info</span></p>
<p class="badge badge-warning"><span class="visually-hidden">Warning</span></p>
<p class="badge"><span class="visually-hidden">Beware</span></p>
html

Here is a valid example of use of functional badges:

Activities

Channels

Conversations

Emails 

<div class="d-flex align-items-center">
  <p class="position-relative mb-none">
    Activities<span class="badge badge-info badge-small ms-2xsmall"></span><span class="visually-hidden">New!</span>
  </p>
  <div class="vr"></div>
  <p class="position-relative mb-none">
    Channels
  </p>
  <div class="vr"></div>
  <p class="position-relative mb-none">
    Conversations<span class="badge badge-info badge-small ms-2xsmall"></span><span class="visually-hidden">New!</span>
  </p>
  <div class="vr"></div>
  <p class="position-relative mb-none">
    Emails<span class="badge badge-info badge-small ms-2xsmall"></span><span class="visually-hidden">New!</span>
  </p>
</div>
html

States

Disabled

The disabled state of a badge appears visually muted to signal that it is not currently active or relevant. To make a disabled badge, simply add the .badge-disabled class. Depending on the use case, the .visually-hidden text may be unnecessary or require adaptation.

<p class="badge badge-neutral badge-disabled"></p>
<p class="badge badge-accent badge-disabled"></p>
<p class="badge badge-positive badge-disabled"></p>
<p class="badge badge-info badge-disabled"></p>
<p class="badge badge-warning badge-disabled"></p>
<p class="badge badge-disabled"></p>
html

Sizes

Badges are available in four sizes. Default size is medium.


<p class="badge badge-xsmall"><span class="visually-hidden">Very small badge</span></p>
<p class="badge badge-small"><span class="visually-hidden">Small badge</span></p>
<p class="badge"><span class="visually-hidden">Medium badge (default)</span></p>
<p class="badge badge-large"><span class="visually-hidden">Large badge</span></p>
html

Badge - Count

Badges - count provide a numerical indication.

If the number itself is not meaningful in the context, add a .visually-hidden text associated with the badge - count. Read more about badges accessibility here.

1

Error1 

<p class="badge badge-count">1<span class="visually-hidden">error</span></p>
<p class="position-relative pt-3xsmall">
  Error<span class="position-absolute top-0 start-100 translate-middle badge badge-count">1</span>
</p>
html

Variants

Status

Badges - count can be used with non-functional or functional colors.

Keep in mind that color should not be the only way to convey information. If the color has a strong meaning, especially in functional statuses, reflect that meaning in the .visually hidden text associated with the badge - count. Read more about badges accessibility here.

0

1

2

10

+99

250

<p class="badge badge-neutral badge-count">0<span class="visually-hidden">notification</span></p>
<p class="badge badge-accent badge-count">1<span class="visually-hidden">notification</span></p>
<p class="badge badge-positive badge-count">2<span class="visually-hidden">confirmations</span></p>
<p class="badge badge-info badge-count">10<span class="visually-hidden">new emails</span></p>
<p class="badge badge-warning badge-count">+99<span class="visually-hidden">alerts</span></p>
<p class="badge badge-count">250<span class="visually-hidden">errors</span></p>
html

States

Disabled

The disabled state of a badge - count appears visually muted to signal that it is not currently active or relevant. To make a disabled badge - count, simply add the .badge-disabled class. Depending on the use case, the .visually-hidden text may require adaptation.

0

1

2

10

+99

250

<p class="badge badge-neutral badge-count badge-disabled">0<span class="visually-hidden">notification</span></p>
<p class="badge badge-accent badge-count badge-disabled">1<span class="visually-hidden">notification</span></p>
<p class="badge badge-positive badge-count badge-disabled">2<span class="visually-hidden">confirmations</span></p>
<p class="badge badge-info badge-count badge-disabled">10<span class="visually-hidden">new emails</span></p>
<p class="badge badge-warning badge-count badge-disabled">+99<span class="visually-hidden">alerts</span></p>
<p class="badge badge-count badge-disabled">250<span class="visually-hidden">errors</span></p>
html

Sizes

Badges - count are available in two sizes. Add .badge-large to have a larger badge. Default size is medium.

12

12

<p class="badge badge-count">12<span class="visually-hidden">errors</span></p>
<p class="badge badge-count badge-large">12<span class="visually-hidden">errors</span></p>
html

Badge - Icon

Badges - icon can be used to visually reinforce meaning.

The recommended way to use icons is to fill an SVG sprite file, and use currentColor for styling. If really necessary, for example when you have a lot of icons, you can use an icon font. Find out more about using icons.

Badges - icon should always be associated to a .visually-hidden text describing the icon's meaning. Read more about badges accessibility here.

<p class="badge">
  <span class="badge-status-icon"></span>
  <span class="visually-hidden">Beware</span>
</p>
<p class="badge badge-neutral">
  <svg class="badge-icon" aria-hidden="true">
    <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty"/>
  </svg>
  <span class="visually-hidden">Favourite</span>
</p>
<p class="badge badge-neutral">
  <span class="badge-icon si si-settings" aria-hidden="true"></span>
  <span class="visually-hidden">Parameter</span>
</p>
html

Variants

Status

Non-functional

Non-functional badges - icon are used to display neutral or accent information without carrying a specific functional meaning (unlike functional badges, see below), reinforced by an icon.

<p class="badge badge-neutral">
  <svg class="badge-icon" aria-hidden="true">
    <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty"/>
  </svg>
  <span class="visually-hidden">Favourite</span>
</p>
<p class="badge badge-accent">
  <svg class="badge-icon" aria-hidden="true">
    <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty"/>
  </svg>
  <span class="visually-hidden">Favourite</span>
</p>
<p class="badge badge-neutral">
  <span class="badge-icon si si-settings" aria-hidden="true"></span>
  <span class="visually-hidden">Parameter</span>
</p>
<p class="badge badge-accent">
  <span class="badge-icon si si-settings" aria-hidden="true"></span>
  <span class="visually-hidden">Parameter</span>
</p>
html
Functional

Functional badges - icon carry a clear meaning related to the status of an object or system, reinforced by an icon. They help the user quickly understand the status of an element and take action if needed.

Keep in mind that color and icon should not be the only ways to convey information. In functional badges, the color and icon have a strong meaning, it must be reflected in the badge's .visually-hidden associated text. Read more about tags accessibility here.

<p class="badge badge-positive">
  <span class="badge-status-icon"></span>
  <span class="visually-hidden">Success</span>
</p>
<p class="badge badge-info">
  <span class="badge-status-icon"></span>
  <span class="visually-hidden">Info</span>
</p>
<p class="badge badge-warning">
  <span class="badge-status-icon"></span>
  <span class="visually-hidden">Warning</span>
</p>
<p class="badge">
  <span class="badge-status-icon"></span>
  <span class="visually-hidden">Beware</span>
</p>
html

States

Disabled

The disabled state of a badge - icon appears visually muted to signal that it is not currently active or relevant. To make a disabled badge - icon, simply add the .badge-disabled class. Depending on the use case, the .visually-hidden text may be unnecessary or require adaptation.

<p class="badge badge-disabled">
  <span class="badge-status-icon"></span>
</p>
<p class="badge badge-neutral badge-disabled">
  <svg class="badge-icon" aria-hidden="true">
    <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty"/>
  </svg>
</p>
<p class="badge badge-neutral badge-disabled">
  <span class="badge-icon si si-settings" aria-hidden="true"></span>
</p>
html

Sizes

Badges - icon are available in two sizes. Add .badge-large to have a larger badge. Default size is medium.

<p class="badge">
  <span class="badge-status-icon"></span>
  <span class="visually-hidden">Error</span>
</p>
<p class="badge badge-large">
  <span class="badge-status-icon"></span>
  <span class="visually-hidden">Error</span>
</p>
<p class="badge badge-neutral">
  <svg class="badge-icon" aria-hidden="true">
    <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty"/>
  </svg>
  <span class="visually-hidden">Badge alt text</span>
</p>
<p class="badge badge-neutral badge-large">
  <svg class="badge-icon" aria-hidden="true">
    <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty"/>
  </svg>
  <span class="visually-hidden">Badge alt text</span>
</p>
<p class="badge badge-neutral badge-large">
  <span class="badge-icon si si-settings" aria-hidden="true"></span>
  <span class="visually-hidden">Parameter</span>
</p>
html

Positioning

Use utilities to modify a .badge and position it in the corner of a button.

<button type="button" class="btn btn-icon btn-default position-relative">
  <svg class="icon" aria-hidden="true">
    <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#trash"/>
  </svg>
  <span class="visually-hidden">Trash</span>
  <span class="position-absolute top-0 start-100 translate-middle badge badge-neutral">
    <span class="visually-hidden">Trash contains items</span>
  </span>
</button>

<button type="button" class="btn btn-default position-relative ms-medium">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge badge-count badge-info">
    +99
    <span class="visually-hidden">New emails</span>
  </span>
</button>
html
Bootstrap $enable-bootstrap-compatibility: true 
<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    +99
    <span class="visually-hidden">unread messages</span>
  </span>
</button>
html 
<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>
html
+99 +99 +99 +99 +99 +99 +99 +99 
<span class="badge text-bg-primary">+99</span>
<span class="badge text-bg-secondary">+99</span>
<span class="badge text-bg-success">+99</span>
<span class="badge text-bg-danger">+99</span>
<span class="badge text-bg-warning">+99</span>
<span class="badge text-bg-info">+99</span>
<span class="badge text-bg-light">+99</span>
<span class="badge text-bg-dark">+99</span>
html
+99 +99 +99 +99 +99 +99 +99 +99 
<span class="badge rounded-pill text-bg-primary">+99</span>
<span class="badge rounded-pill text-bg-secondary">+99</span>
<span class="badge rounded-pill text-bg-success">+99</span>
<span class="badge rounded-pill text-bg-danger">+99</span>
<span class="badge rounded-pill text-bg-warning">+99</span>
<span class="badge rounded-pill text-bg-info">+99</span>
<span class="badge rounded-pill text-bg-light">+99</span>
<span class="badge rounded-pill text-bg-dark">+99</span>
html