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 :badge field type and are controlled using the badge_class option.

column :status, field_type: :badge, badge_class: { approved: 'cm-badge-green', draft: 'cm-badge-yellow', rejected: 'cm-badge-red' }

note

The :tag field type and tag_class option were renamed to :badge and badge_class in v8.0.0. Using :tag raises an error at boot. See the v8.0.0 upgrade guide.

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

Removed Aliases

The following old class names are no longer supported: they have no styles, and field raises an error at boot if badge_class uses them. Replace them with the Catalyst equivalents:

Removed	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 badge 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