Badge

stablev1.0.0

Badges are small status indicators, a badge consists of a small box typically containing a number or a small phrase that appears next to another element.

Overview

Badges can be used in different ways, such as notification, to catch up attention, etc. It matches the size of its immediate parent by using relative font sizing em units.

New messages 6

Lorem consectetur adipisicing amatory!

New! Look at that! Nice! Gloups ?! Who turns the light off? Much white!

☝️ Take into account the information flow of your product or service.

Sometimes the information provided by the badge is perfectly understood without context (if a number is inline with a notifications text, for example). But remember that there are people with disabilities, and they could be using screen readers.

If the meaning of the badge relies only on visual cues, remember to use the appropriate ARIA tags in order to reference the content correctly.

Usage

Dependencies

To get the badge component working, include the dependencies in your project in the following order:

  1. npm
  2. Sass
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/01-atoms/badge';

Basic code

The badge is composed by a span tag with the class badge

  1. HTML
  2. Pug
<span class="badge"></span>

span.badge

Modifiers

Add any of the following modifier to change the appearance of a badge:

🤘 Tips: You can mix modifiers together to achieve the desired appearance.

Sizes

Size modifier allows you to change the font sizing ratio of the badge and its paddings.

h3 heading Small size

h3 heading Medium size

h3 heading Large size

  1. HTML
  2. Pug
<!-- Small -->
<span class="badge badge--sm"></span>

<!-- Medium -->
<span class="badge badge--md"></span>

<!-- Large -->
<span class="badge badge--lg"></span>

//- Small
span.badge.badge--sm

//- Medium
span.badge.badge--md

//- Large
span.badge.badge--lg

🧐 UX wise: Be careful when choosing the size of your badge, make sure the contrast between of the font comply with the WCAG 2.0. You can use this tool to check contrasts.

Colors

7 colors are available based on the main colors of the theme used in your project.

Primary Secondary Success Warning Danger Grey White

  1. HTML
  2. Pug
<!-- Primary -->
<span class="badge badge--primary"></span>

<!-- Secondary -->
<span class="badge badge--secondary"></span>

<!-- Success -->
<span class="badge badge--success"></span>

<!-- Warning -->
<span class="badge badge--warning"></span>

<!-- Danger -->
<span class="badge badge--danger"></span>

<!-- Grey -->
<span class="badge badge--grey"></span>

<!-- White -->
<span class="badge badge--white"></span>

//- Primary
span.badge.badge--primary

//- Secondary
span.badge.badge--secondary

//- Success
span.badge.badge--success

//- Warning
span.badge.badge--warning

//- Danger
span.badge.badge--danger

//- Grey
span.badge.badge--grey

//- White
span.badge.badge--white

🧐 UX wise: Be careful when choosing the color of your badge, make sure the contrast between the background and the foreground comply with the WCAG 2.0. You can use this tool to check contrasts.

Pill

Badge can take the shape of a pill (round corners) using the modifier below.

Choose wisely: Blue pill or Red pill

  1. HTML
  2. Pug
<span class="badge badge--pill"></span>

span.badge.badge--pill