Badge

Easily create nice looking notification badge.

Colors Yes

Sizes Yes

Variables Yes

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

Colors #

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>

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="1">
      Small badge
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-success" data-badge="16">
      Normal badge
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-warning is-badge-medium" data-badge="32">
      Medium badge
    </span>
  </div>
  <div class="column">
    <span class="badge is-badge-danger is-badge-large" data-badge="64">
      Large badge
    </span>
  </div>
</div>

Styles #

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

Notifications

      <div class="columns">
  <div class="column">
    <span class="badge is-badge-outlined is-badge-danger" data-badge="1">
      Notifications
    </span>
  </div>
  <div class="column">
    <button class="button is-primary badge is-badge-success is-badge-outlined" data-badge="256">Button</button>
  </div>
</div>
    

Variables #

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

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

This page is open source. View on GitHub