Badges

Documentation for badges components.

Files

app/styles/modules/_badges.scss

Badges

A badge provides an extra information that needs to be visually separated. Using badge is as simple as wrapping text into an element with .badge class. If you need multiple badges in one line, wrap them with .badges container.

Example:
Default badge
Mutilple
badges
in line.
Code:
<div class="badge mb-small">Default badge</div>
<div class="badges">
  <div class="badge">Mutilple</div>
  <div class="badge">badges</div>
  <div class="badge">in line.</div>
</div>

Badge colors

There are also some predefined colors that can be used:

Example:
primary
transparent
default
darkgrey
success
red
pink
lightblue
blue
green
yellow
orange
Code:
<div class="badges">
  <div class="badge badge--primary">primary</div>
  <div class="badge badge--transparent">transparent</div>
  <div class="badge badge--default">default</div>
  <div class="badge badge--darkgrey">darkgrey</div>
  <div class="badge badge--success">success</div>
</div>

Hollow badges

There are also some predefined colors that can be used:

Example:
primary
default
darkgrey
success
red
pink
lightblue
blue
green
yellow
orange
Code:
<div class="badges">
  <div class="badge badge--hollow badge--primary">primary</div>
  <div class="badge badge--hollow badge--default">default</div>
  <div class="badge badge--hollow badge--darkgrey">darkgrey</div>
  <div class="badge badge--hollow badge--success">success</div>
</div>

Badge sizes

Example:
default
large
Code:
<div class="badge">default</div>
<div class="badge badge--large">large</div>

Badge clickable

You can use clickable badge style:

Example:
transparent
default
darkgrey
SME s. 3-5
SME s. 4
SME s. 4
SME s. 4
Code:
<div class="badges">
  <div class="badge badge--clickable badge--transparent">transparent</div>
  <div class="badge badge--clickable badge--default">default</div>
  <div class="badge badge--clickable badge--darkgrey">darkgrey</div>
  <div class="badge badge--clickable badge--transparent text-color-black"><strong>SME</strong> s. 3-5</div>
  <div class="badge badge--clickable badge--transparent text-color-success"><strong>SME</strong> s. 4</div>
  <div class="badge badge--clickable badge--transparent text-color-error"><strong>SME</strong> s. 4</div>
  <div class="badge badge--clickable badge--transparent text-color-warning"><strong>SME</strong> s. 4</div>
</div>

Badges with close button

Example:
transparent
default
darkgrey
Code:
<div class="badges">
  <div class="badge badge--clickable badge--transparent">
    <span>transparent</span>
    <a class="badge__close" href="javascript:;">
      //icon
    </a>
  </div>
  <div class="badge badge--clickable badge--default">
    <span>default</span>
    <a class="badge__close" href="javascript:;">
      //icon
    </a>
  </div>
  <div class="badge badge--clickable badge--darkgrey">
    <span>darkgrey</span>
    <a class="badge__close" href="javascript:;">
      //icon
    </a>
  </div>
</div>

Split badges

Example:
Code:
<div class="badge badge--split">
  <button class="badge--split__button">...</button>
  <button class="badge--split__button">...</button>
</div>
<div class="badge badge--split badge--large">
  <button class="badge--split__button">...</button>
  <button class="badge--split__button">...</button>
</div>

Pills

Using Pills is as simple as wrapping text into an element with .pill class.

Example:
8
30
102
Code:
<div class="pill mb-small">4</div>
<div class="pill pill--blue mb-small">30</div>
<div class="pill pill--white mb-small">102</div>
<div class="pill pill--medium pill--light-grey">
  //icon
</div>