View on GitHub

Badges

Badges are small UI elements used to highlight status, notifications, or categorization within an interface. It is often displayed as a label or indicator with a distinct background color and text.

On this page

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.

Badge

OUDS Web has a base .badge class that sets up basic styles.

For accessibility and semantics reasons, badges, like any other informative elements, must be enclosed in an ancestor or parent semantic tag. In the following examples, <p> is used as the base semantic element, but you can use any other semantic tag depending on the context.

<p class="badge"><span class="visually-hidden">Badge alt text</span></p>
html

Variants

OUDS Web color and background helpers can be applied to display badge variants, each serving its own semantic purpose. Please follow the Badge design specifications to choose the right badge for the right action.

These variants are shared with the other types of badges

<p class="badge"><span class="visually-hidden">Badge alt text</span></p>
<p class="badge text-bg-status-accent-emphasized"><span class="visually-hidden">Badge alt text</span></p>
<p class="badge text-bg-status-positive-emphasized"><span class="visually-hidden">Badge alt text</span></p>
<p class="badge text-bg-status-info-emphasized"><span class="visually-hidden">Badge alt text</span></p>
<p class="badge text-bg-status-warning-emphasized"><span class="visually-hidden">Badge alt text</span></p>
<p class="badge text-bg-status-negative-emphasized"><span class="visually-hidden">Badge alt text</span></p>
<p class="badge badge-disabled"><span class="visually-hidden">Badge alt text</span></p>
html

Sizes

Badges are available in four sizes.


<p class="badge badge-lg"><span class="visually-hidden">Badge alt text</span></p>
<p class="badge"><span class="visually-hidden">Badge alt text</span></p>
<p class="badge badge-sm"><span class="visually-hidden">Badge alt text</span></p>
<p class="badge badge-xs"><span class="visually-hidden">Badge alt text</span></p>
html

Badge - Count

Badges can be used to display numerical value using the .badge-count class.

1

23

+99

<p class="badge badge-count">1</p>
<p class="badge badge-count text-bg-status-positive-emphasized">23</p>
<p class="badge badge-count badge-disabled">+99</p>
html

Sizes

Badge - Count are available in two sizes.

12

12


<p class="badge badge-count badge-lg">12</p>
<p class="badge badge-count">12</p>
html

Badge - Icon

Badges can be used with icons 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.

<p class="badge">
  <svg aria-hidden="true">
    <use xlink:href="/orange/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty"/>
  </svg>
  <span class="visually-hidden">Badge alt text</span>
</p>
<p class="badge text-bg-status-negative-emphasized">
  <svg aria-hidden="true">
    <use xlink:href="/orange/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty"/>
  </svg>
  <span class="visually-hidden">Badge alt text</span>
</p>
html

Sizes

Badge - Icon are available in two sizes.


<p class="badge badge-lg">
  <svg aria-hidden="true">
    <use xlink:href="/orange/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty"/>
  </svg>
  <span class="visually-hidden">Badge alt text</span>
</p>
<p class="badge">
  <svg aria-hidden="true">
    <use xlink:href="/orange/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty"/>
  </svg>
  <span class="visually-hidden">Badge alt text</span>
</p>
html

Positioned

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

<button type="button" class="btn btn-icon btn-default position-relative">
  <svg aria-hidden="true">
    <use xlink:href="/orange/docs/0.5/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 text-bg-status-negative-emphasized">
    <span class="visually-hidden">Trash contains items</span>
  </span>
</button>

<button type="button" class="btn btn-default position-relative ms-md">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge badge-count text-bg-status-info-emphasized">
    +99
    <span class="visually-hidden">New mails</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