Label

Indicate important notes and highlight parts of your content.

Usage

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

<span class="uk-label"></span>
Copy to clipboard
  • Default Primary Secondary Danger
  • <span class="uk-label">Default</span>
    
    <span class="uk-label uk-label-primary">Primary</span>
    
    <span class="uk-label uk-label-secondary">Secondary</span>
    
    <span class="uk-label uk-label-danger">Danger</span>

Style modifiers

Add one of the following classes for additional styles.

ClassDescription
.uk-label-primaryAdds a primary style.
.uk-label-secondaryAdds a secondary style.
.uk-label-dangerAdds a destructive style.
<span class="uk-label-success uk-label"></span>
Copy to clipboard
  • Default Primary Secondary Danger
  • <span class="uk-label">Default</span>
    
    <span class="uk-label uk-label-primary">Primary</span>
    
    <span class="uk-label uk-label-secondary">Secondary</span>
    
    <span class="uk-label uk-label-danger">Danger</span>

Theme development

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

import ui from "franken-ui";

ui({
    components: {
        label: {
            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
hook-label.uk-label
hook-success.uk-label-success
hook-item-warning.uk-label-warning
hook-item-danger.uk-label-danger
hook-misc*