Badge
The Badge is a small UI element 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.
Base classLink to this section: Base class
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.
Badge alt text
<p class="badge"><span class="visually-hidden">Badge alt text</span></p>Standard variantsLink to this section: Standard 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.
Badge alt text
Badge alt text
Badge alt text
Badge alt text
Badge alt text
Badge alt text
Badge alt text
<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>SizesLink to this section: Sizes
Badges are available in four sizes.
Badge alt text
Badge alt text
Badge alt text
Badge alt text
<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>With countLink to this section: With count
Badges can be used to display numerical value using the .badge-count class.
1
1
23
23
+99
+99
<p class="badge badge-count">1</p>
<p class="badge badge-lg badge-count">1</p>
<p class="badge badge-count text-bg-status-positive-emphasized">23</p>
<p class="badge badge-count badge-lg text-bg-status-positive-emphasized">23</p>
<p class="badge badge-count badge-disabled">+99</p>
<p class="badge badge-count badge-lg badge-disabled">+99</p>With iconsLink to this section: With icons
Badges can be used with icons to visually reinforce meaning.
Badge alt text
Badge alt text
Badge alt text
Badge alt text
<p class="badge">
<svg aria-hidden="true">
<use xlink:href="/docs/0.5/assets/img/ouds-web-sprite.svg#heart-recommend"/>
</svg>
<span class="visually-hidden">Badge alt text</span>
</p>
<p class="badge badge-lg">
<svg aria-hidden="true">
<use xlink:href="/docs/0.5/assets/img/ouds-web-sprite.svg#heart-recommend"/>
</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="/docs/0.5/assets/img/ouds-web-sprite.svg#heart-recommend"/>
</svg>
<span class="visually-hidden">Badge alt text</span>
</p>
<p class="badge badge-lg text-bg-status-negative-emphasized">
<svg aria-hidden="true">
<use xlink:href="/docs/0.5/assets/img/ouds-web-sprite.svg#heart-recommend"/>
</svg>
<span class="visually-hidden">Badge alt text</span>
</p>PositionedLink to this section: 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="/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>
Bootstrap
$enable-bootstrap-compatibility: true
This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more
about Bootstrap compatibility.
<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><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><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><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>