Status Tags

Overview

CmAdmin provides a set of Catalyst Tag classes used to display enum or state values with a colored badge. These are rendered via the :tag field type and are controlled using the tag_class option.

All tag classes use a cm-badge- prefix (Catalyst Tag) to avoid conflicts with generic CSS utility classes.

Available Tag Classes

Class	Preview	Use Case Example
cm-badge-blue	Sample	Active, In Progress, Enabled
cm-badge-yellow	Sample	Pending, Awaiting, Draft
cm-badge-orange	Sample	On Hold, Needs Review, Processing
cm-badge-purple	Sample	Scheduled, Queued, Resolved
cm-badge-cyan	Sample	Info, Beta, Staging
cm-badge-green	Sample	Completed, Approved, Verified
cm-badge-gray	Sample	Inactive, Archived, Unknown
cm-badge-red	Sample	Rejected, Failed, Blocked, Deleted

Deprecated Aliases

The following old class names still work but are deprecated. Use the Catalyst equivalents for all new code:

Deprecated	Use Instead
active / active-one	cm-badge-blue
active-two	cm-badge-yellow
active-three	cm-badge-orange
active-four	cm-badge-purple
active-five	cm-badge-cyan
completed	cm-badge-green
neutral	cm-badge-gray
danger	cm-badge-red

warning

Bootstrap badge color classes (bg-success, bg-warning, bg-danger, bg-secondary) are not supported as tag classes. Always use cm-badge-* Catalyst Tags.

Best Practices

1. Use cm-badge-green for positive terminal states (approved, verified, done)
2. Use cm-badge-red for negative terminal states (rejected, failed, blocked)
3. Use cm-badge-gray for inactive or non-significant states (archived, unknown)
4. Use cm-badge-blue for currently live or enabled items
5. Use cm-badge-yellow for items awaiting action (pending, draft)
6. Use cm-badge-orange through cm-badge-cyan to differentiate multiple intermediate states when two or more non-red/green statuses exist
7. Never use Bootstrap badge color classes — they are not equivalent and will produce inconsistent styling