We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Easily create nice looking notification badges.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the Badge component
within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
badge: {
hooks: {}
}
}
}),To create a badge, just add the .uk-badge class to an inline element like <a> or <span> element.
<span class="uk-badge"></span><span class="uk-badge">1</span>
<span class="uk-badge">100</span>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. |
<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>Learn more about using hooks.
| Hook Name | Affected Classes |
|---|---|
hook-badge | .uk-badge |
hook-hover | .uk-badge:hover |
hook-misc | * |