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>

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.

Theme development

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

import ui from "franken-ui";

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 Name	Affected Classes
hook-badge	.uk-badge
hook-hover	.uk-badge:hover
hook-misc	*