Label
Small Element. Big Context.
The Label component is a compact inline text element used to categorize, annotate, or highlight content within your pages. It can add clarity, serve as a badge, introduce subtext, or group related information, all without disrupting the layout. Whether you’re flagging content as “New”, tagging categories, or calling attention to key details, labels provide a fast and effective way to boost understanding and structure.
Styled through themes, and easy to position or repurpose, it’s a minimal yet powerful component designed for clarity and context.
Inform, Categorize, Enhance
Inline & Subtle.
Add clarity without disrupting design.Great for notes, badges, and hints.
Mark status, priority, or content type.Micro-Categorization.
Supports both visual and logical grouping.
Flexible Styling & Placement
Theme Support Built In.
Match your project’s visual language.Minimal by nature, easy to scale.
Works across screen sizes without clutter.Use in articles, layouts, lists, and CTAs.
Ideal for both UX and editorial work.
Use Cases
Labels are one of the most efficient ways to add contextual meaning or micro-categorization to content. They improve the user experience by offering additional information at a glance, whether as tags, status indicators, or inline notes.
Typical use cases include:
Category tags in blogs, product listings, or knowledge bases
Status markers like “New”, “Beta”, “Coming Soon”, or “Updated”
Inline notes near buttons, titles, or CTAs for clarity
Labeling filters or active selections in forms or dynamic pages
Highlighting metadata such as author roles, tech tags, or difficulty levels
They can be styled for visibility or subtlety, depending on need, and reused anywhere consistent inline context is required.
Configuration Options & Features
The Label component is your go-to for fast, minimal, and precise in-line context. Whether you’re organizing content, adding visual cues, or tagging structure, it’s a flexible and themeable tool that seamlessly integrates into any layout with zero fuss.
Compact. Clear. Contextual.
Perfect for modern, informative UX.
Text
The main label content.
Enter a short string of text that communicates the tag’s purpose. This can be one word or a short phrase like:
“New”
“Free”
“Marketing”
“In Review”
“Pro Tip”
Keep it concise and clear to ensure it blends naturally into your design.
Component Theme
Use this option to assign styling possibilities to your Label via a Component Theme or Theme Preset.
This makes it easy to visually distinguish between types of labels (e.g., color-coding for status) and maintain a consistent design throughout your project.