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
Javascript No
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