Bulma Badge

A versatile, easy-to-use badge extension for Bulma.

The Badge Extension provides two distinct ways to add notifications and status indicators to your elements:Simple (via data-attribute) and Rich (via nested class). All badges are rounded by default in this version.

Simple Usage

Use the data-badge attribute for basic text notifications. These are generated via CSS ::after pseudo-elements.

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

Notifications

Status Box

Rich Usage

Use the .badge class for badges that require icons or complex inner content. The parent element automatically becomes a badge holder.

<button class="button">
    Profile
    <span class="badge is-success">
        <span class="icon is-small">
            <i class="material-icons">check</i>
        </span>
    </span>
</button>

Messages 99+

Positioning

Top-Right is default. Both versions support custom placement.

Rich (.badge)

Simple (data-badge)

Color Variations

Badges support all Bulma core colors and outlined variations.

Working with Icons

Attach badges to larger icon holders for a modern UI look.