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.
| Class | Description |
|---|---|
.uk-badge-primary | Adds a primary style. |
.uk-badge-secondary | Adds a secondary style. |
.uk-badge-danger | Adds 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>
- On This Page
- Usage
- Style modifiers
Request Web Components
Franken UI is an independent project. Help support it and
expand its free component library.
Reach out