Tag
Non-interactive labels for status and classification.
Draft
AI-drafted
Published
Awaiting approval
Failed
Show the markup
<span class="cc-tag">Draft</span>
<span class="cc-tag cc-tag--brand">AI-drafted</span>
<span class="cc-tag cc-tag--success">Published</span>
<span class="cc-tag cc-tag--warning">Awaiting approval</span>
<span class="cc-tag cc-tag--danger">Failed</span>Accessibility
- The text carries the meaning; the color variant only reinforces it (1.4.1).
- All variants meet 7:1 on their backgrounds.
- Not focusable, not clickable — that's Chip's job.