Badge

Easily create nice looking notification badges.

FrankenstyleKit (aka Franken UI 3.0) is now available. Support for the current version will gradually wind down. It will continue to work, but using the latest version is recommended for new projects so you can benefit from future updates and enhancements.

Table of contents

Usage

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

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-destructiveAdds a destructive style.
  • 1 100 100 100
Customize

Customize your Franken UI experience.