Component Tagging Strategies

Core Insight: Tag components to enable gradual migration and automated tracking

Copy link

When to Apply

• Legacy system migration → Updating existing products gradually
• Adoption measurement → Tracking design system usage
• Component auditing → Understanding current component landscape

Copy link

Why This Works

• ✓ Gradual migration - Lukas (Microsoft): "Adoption slows when teams hesitate to rework entire products"
• ✓ Automated tracking - Enables tools to identify design system components
• ✓ Searchable codebase - Easy to find and update components across applications
• ✓ Testing integration - Data attributes work excellently for automated testing

Copy link

Alternative Approaches

• Generic HTML elements - Simpler to implement → Impossible to track or migrate systematically
• Custom CSS classes only - Works for styling → Doesn't provide component metadata
• Manual tracking - Full control → Doesn't scale, becomes outdated quickly

Copy link

Quick Example

<!-- Class-based (Fluent UI) -->
<button type="button" class="fui-Button r1alrhcs">Click me</button>
 
<!-- Element renaming (Nord) -->
<nord-input id="email" label="Email"></nord-input>
 
<!-- Data attributes (Carbon) -->
<div class="c4d--masthead" data-autoid="c4d--masthead__navigation"></div>

Copy link

Related Insights

• Markdown Documentation Strategy - Documenting tagged components
• Multiple Themes - Managing tags across theme variations

Sources: Microsoft Fluent 2 Session • March 2025