Static badges and tags for status indicators, feature highlights, and categorical labels. Derived from mockup specifications with full dark mode support.
Single source of truth for all badges. Do NOT create
custom badge classes in component-specific CSS.
All badges automatically support light/dark themes and glassy contexts
(app-shell, entity headers, panels).
Use the 🌙 toggle (top-right) to test badges in both themes.
Badge Element provides static visual labels for status, features, and categories.
.badge-group for
multiple badges
Not the same as Buttons: Badges are for display only. For interactive elements, use Button or Action Tile components.
Badge variants derived from canonical mockups (guest-layout.html, offers-search.html):
| Mockup Class | Use Case | Badge Element |
|---|---|---|
.card-offer-badge-right
|
Featured/Popular highlights |
.badge .badge--accent
|
.card-offer-badge-left
|
Availability on images |
.badge .badge--overlay
|
.card-offer-tag |
Feature tags in cards |
.badge .badge--muted
|
.badge-seasonal |
Category indicators |
.badge .badge--orange
|
.tag-green |
Amenity features |
.badge .badge--green
|
Highlighted badges for featured content, promotions, or important status (amber color with backdrop blur).
<span class="badge badge--accent">🔥 Popular</span>
<span class="badge badge--accent">Featured</span>Neutral badges for feature tags, amenities, and secondary information (light gray background).
<span class="badge badge--muted">🏠 House A or B</span>
<span class="badge badge--muted">👥 up to 6 guests</span>Bordered badges for subtle emphasis or secondary categorization.
<span class="badge badge--outline">Available</span>Badges positioned on images with backdrop blur for better readability (green variant for availability).
<div style="position: relative;">
<img src="property.jpg" alt="Property">
<span class="badge badge--overlay badge--absolute-tl">Available</span>
<span class="badge badge--accent badge--absolute-tr">🔥 Featured</span>
</div>Badges using brand palette colors for categorization and feature highlighting.
<span class="badge badge--primary">Primary</span>
<span class="badge badge--green">Green Tag</span>
<span class="badge badge--orange">Orange Tag</span>Badges with left-aligned Heroicons for enhanced visual communication.
<span class="badge badge--green">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Guided Tour
</span>Badge sizes for different contexts and visual hierarchies.
<span class="badge badge--accent badge--sm">Small</span>
<span class="badge badge--accent">Medium (Default)</span>
<span class="badge badge--accent badge--lg">Large</span>
Multiple badges arranged with consistent spacing using
.badge-group.
<div class="badge-group">
<span class="badge badge--muted">🏠 House A</span>
<span class="badge badge--muted">👥 up to 6</span>
<span class="badge badge--muted">🔥 BBQ</span>
</div>Badges used in signed-in GLASSY UI for status indicators and counters in entity headers, dashboards, and management interfaces.
.badge--outline now has enhanced visibility on glassy
backgrounds with semi-transparent background and brighter borders.
Perfect for code badges and ID labels in entity headers.
<span class="badge badge--green">Active</span>
<span class="badge badge--muted">Inactive</span>
<span class="badge badge--blue">Draft</span>
<span class="badge badge--orange">Pending</span>
<span class="badge badge--outline">Archived</span>Used in entity headers and summary views with emoji icons for quick metrics.
<div class="badge-group">
<span class="badge badge--muted">🏠 2 Units</span>
<span class="badge badge--muted">🪟 4 Windows</span>
<span class="badge badge--muted">🎁 6 Extras</span>
</div>Badge sizes for different contexts in app-shell layouts.
<span class="badge badge--primary badge--sm">Small</span>
<span class="badge badge--primary">Default</span>
<span class="badge badge--primary badge--lg">Large</span>Typical badge usage in an entity header combining status and counters.
<!-- Code badge + Status -->
<span class="badge badge--outline">OFF-2024-001</span>
<span class="badge badge--green">Active</span>
<!-- Stats counters -->
<div class="badge-group">
<span class="badge badge--muted">🏠 2 Units</span>
<span class="badge badge--muted">🪟 3 Windows</span>
<span class="badge badge--muted">🎁 5 Extras</span>
</div>.badge--accent
for featured/popular highlights
.badge--muted
for feature tags in cards
.badge--overlay
for badges on images
.badge-group
wrapper for multiple badges
/assets/css/badge.css
.badge-group
Badge Element styles live in
/assets/css/badge.css. Badges in Cards, Forms, Lists, or any higher-level pattern MUST
use these classes. If you need a new badge variant, add it to the
Badge Element definition, not to the higher-level component.
All badge styles are defined in:
/assets/css/badge.css
Imported by: /assets/css/ui-system.css
Includes: Base badge styling, all variants (accent, muted, outline, overlay), brand color badges, size variants, icon support, glassy context adaptations, and badge-group wrapper.
Color tokens used by badge variants
Text sizing and font-weight tokens for badges
For interactive elements - badges are display-only
Example using badges with .badge-group in glassy context
Badge usage in card components for features and status
Complete layout showing badges in glassy app-shell context