Easlily create nicely looking badges to label and highlight your content.

\n\n

Usage

\n\n

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

\n\n

Example

\n\n

\n Info\n New\n Free\n

\n\n

Markup

\n\n
<div class="uk-badge">...</div>
\n\n
\n\n

Modifiers

\n\n

To display badges in a different style, just add modifier classes to the .uk-badge class. These modifiers can be combined with each other.

\n\n

Notification

\n\n

Add the .uk-badge-notification class to indicate a notification, typically it is used with numbers.

\n\n

Example

\n\n

\n 1\n 2\n 3\n 10\n 100\n

\n\n

Markup

\n\n
<div class="uk-badge uk-badge-notification">...</div>
\n\n
\n\n

Color Modifier

\n\n

Add the .uk-badge-success, .uk-badge-warning or .uk-badge-danger class for additional colors.

\n\n

Example

\n\n

\n Success\n Warning\n Danger\n

\n\n

\n 1\n 10\n 1\n 10\n 1\n 10\n

\n\n

Markup

\n\n
<div class="uk-badge uk-badge-success">...</div>\n<div class="uk-badge uk-badge-warning">...</div>\n<div class="uk-badge uk-badge-danger">...</div>
\n