Badge: Topic tag

Ready

HTML
View
Context
Info
Notes


        
        <a href="#" class="tags">Gaming</a>


        {{#if nav}}
<div style="display:flex;align-items:center;gap:0.5rem;font-family:'Satoshi';font-size:0.875rem;color:var(--title);">
  Video Ideas &amp; Title Suggestions <span class="badge ms-auto">{{label}}</span>
</div>
{{else}}
<a href="#" class="tags">{{label}}</a>
{{/if}}


        
            
            {
  "label": "Gaming",
  "nav": false
}

Handle: @badge--topic
Variants (4): Default , Nav — AI indicator , Topic tag , Niche tag
Preview:
- With layout
- Component only
Filesystem Path: src/components/02-atoms/badge/badge.hbs

Two badge patterns are used in the app:

Nav badge (.badge.ms-auto) — Bootstrap badge shown inline in the sidebar nav to flag that a tool uses AI. Always right-aligned using ms-auto.

Topic tag (.tags) — Pill-shaped clickable tag used for niches and topics in content areas (video suggestions list, script page). Hover turns purple.