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  element.

<span class="uk-badge"></span>

1 100
Something's not working? Feel free to report an issue or edit this snippet .
```
1
100
```

Something's not working? Feel free to report an issue or edit this snippet .

<div>
  <span className="uk-badge">1</span>
  <span className="uk-badge">100</span>
</div>

Style modifiers

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

Class	Description
`.uk-badge-primary`	Adds a primary style.
`.uk-badge-secondary`	Adds a secondary style.
`.uk-badge-destructive`	Adds a destructive style.

1 100 100 100

Something's not working? Feel free to report an issue or edit this snippet .

<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-destructive">100</span>

Something's not working? Feel free to report an issue or edit this snippet .

<div>
  <span className="uk-badge">1</span>
  <span className="uk-badge uk-badge-primary">100</span>
  <span className="uk-badge uk-badge-secondary">100</span>
  <span className="uk-badge uk-badge-destructive">100</span>
</div>

On This Page
Usage
Style modifiers