Easily create nice looking notification badges.


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.

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

Theme development

On your tailwind.config.js file, add the Badge component within the ui() plugin.

import ui from "franken-ui";

    components: {
        badge: {
            hooks: {}

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes