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
"integration-common-files": "git+ssh://git@github.com/Selectra-Dev/integration-common-files.git"

@import 'integration-common-files/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.

Small

h3 heading Small size

Medium

h3 heading Medium size

Large

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 bewteen 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, all you have to do is adding the modifier class mentionned below.

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 bewteen 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