Documentation

This site gathers documentation of my GitHub projects

Badge

Display a badge element in front of Bulma's element in different colors.
It's useful, for example, to display a number of items like notifications or mails.

Colors Yes
Sizes Yes
Variables Yes

<button class="button badge" data-badge="8">Button</button>

Colors #

Notifications
Notifications
Notifications
Notifications
Notifications
Notifications
Notifications
<div class="columns">
  <div class="column">
    <span class="badge" data-badge="">
      Notifications
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-success" data-badge="">
      Notifications
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-warning" data-badge="">
      Notifications
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-danger" data-badge="">
      Notifications
    </span>
  </div>
</div>

<div class="columns">
  <div class="column">
    <span class="badge" data-badge="8">
      Notifications
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-success" data-badge="88">
      Notifications
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-danger" data-badge="888">
      Notifications
    </span>
  </div>
</div>

<div class="block">
  <button class="button badge" data-badge="">Button</button>
  <button class="button badge" data-badge="8">Button</button>
</div>

<div class="block">
  <button class="button is-primary badge" data-badge="">Button</button>
  <button class="button is-info badge" data-badge="8">Button</button>
</div>

Sized #

Small badge
Normal badge
Medium badge
Large badge
<div class="columns">
  <div class="column">
    <span class="badge is-badge-success is-badge-small" data-badge="10">
      Small badge
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-success" data-badge="10">
      Normal badge
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-warning is-badge-medium" data-badge="10">
      Medium badge
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-danger is-badge-large" data-badge="10">
      Large badge
    </span>
  </div>
</div>

Styles #

You can display an outlined badge by using .is-badge-outlined modifier.

Notifications
Notifications
Notifications
Notifications
Notifications
Notifications
Notifications
<div class="columns">
  <div class="column">
    <span class="badge is-badge-outlined" data-badge="">
      Notifications
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-success is-badge-outlined" data-badge="">
      Notifications
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-warning is-badge-outlined" data-badge="">
      Notifications
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-danger is-badge-outlined" data-badge="">
      Notifications
    </span>
  </div>
</div>

<div class="columns">
  <div class="column">
    <span class="badge is-badge-outlined" data-badge="8">
      Notifications
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-success is-badge-outlined" data-badge="88">
      Notifications
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-danger is-badge-outlined" data-badge="888">
      Notifications
    </span>
  </div>
</div>

<div class="block">
  <button class="button badge is-badge-outlined" data-badge="">Button</button>
  <button class="button badge is-badge-outlined" data-badge="8">Button</button>
</div>

<div class="block">
  <button class="button is-primary badge is-badge-outlined" data-badge="">Button</button>
  <button class="button is-info badge is-badge-outlined" data-badge="8">Button</button>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$badge-border-size .1rem
$badge-border-radius 1rem

This page is designed with Bulma CSS framework.