Badge

Easily create nice looking notification badges.

Usage

To create a badge, just add the .uk-badge class to an inline element like <a> or <span> element.

<span class="uk-badge"></span>
Copy to clipboard
  • 1 100
  • <span class="uk-badge">1</span>
    <span class="uk-badge">100</span>

Style modifiers

There are several style modifiers available. Just add one of the following classes to apply a different look.

ClassDescription
.uk-badge-primaryAdds a primary style.
.uk-badge-secondaryAdds a secondary style.
.uk-badge-dangerAdds a destructive style.
Copy to clipboard
  • 1 100 100 100
  • <span class="uk-badge">1</span>
    <span class="uk-badge uk-badge-primary">100</span>
    <span class="uk-badge uk-badge-secondary">100</span>
    <span class="uk-badge uk-badge-danger">100</span>
Customize