Chi Design System

Badges

Badges are useful, for example, to define tags.

example
<div class="c-badge">
  <span>example</span>
</div>

Badges are inline elements

one
two
<div class="a-badge">
  <span>one</span>
</div>

<div class="a-badge">
  <span>two</span>
</div>

Exists different modifiers to express the badge nature.

  • -brand Brand color badge
  • -info Information bagde
  • -danger Danger badge
  • -dark Dark badge
  • -light Light badge
brand
info
danger
dark
light

Example of usage

<div class="a-badge -brand">
  <span>brand</span>
</div>

Also there are available modifiers to change the type of badge.

  • -outline Outline style
  • -flat Flat style

outline badges

base
brand
info
danger
dark
light

flat badges

base
brand
info
danger
dark
light

Example of usage

<div class="a-badge -outline">
  <span>outline</span>
</div>

Pills

Pills could be used, for example, to show a number of notifications. To create a pill use the modifier -pill.

solid pills

10
20
30
40
50
60

outline pills

10
20
30
40
50
60

Example of usage

<div class="a-badge -pill">
  <span>50</span>
</div>