Components

Status Badge

The outline status pill used in every table status column. A base .badge-rvn shape class plus one .badge-<status> colour class — always both, as a compound selector so it beats Bootstrap.

Source in the MFEs

administrator-fe layout.scssrate-fe Inputdata/index.tsxUserManagement.vuestatus-badge-styling skill

Variants

Five colour classes. The badge is an outline pill: text at light-2, border at light-3, transparent background. Apply badge-rvn plus exactly one colour class.

Preview

ACTIVEAPPROVEDUNKNOWNDRAFTREJECTED

// React (rate-fe, reference-fe, racar-fe, …)
<span className="badge-rvn badge-success">ACTIVE</span>
<span className="badge-rvn badge-error">REJECTED</span>

Name	Type	Default	Description
`badge-success`	`class`	—	Used for statuses that map to “success”.
`badge-info`	`class`	—	Used for statuses that map to “info”.
`badge-warning`	`class`	—	Used for statuses that map to “warning”.
`badge-pending`	`class`	—	Used for statuses that map to “pending”.
`badge-error`	`class`	—	Used for statuses that map to “error”.

Status mapping

Statuses are converted to a colour class through a small mapper so the whole platform agrees on which status is which colour.

// rate-fe/src/pages/Inputdata/index.tsx
const getStatusClass = (status?: string) => {
  const s = String(status || '').toUpperCase();
  if (s === 'PENDING' || s === 'UNDONE' || s === 'VALIDATING' || s === 'DRAFT') return 'badge-pending';
  if (s === 'APPROVED' || s === 'VALIDATED_SUCCESSFUL') return 'badge-info';
  if (s === 'SUBMITTED') return 'badge-success';
  if (s === 'REJECTED' || s === 'VALIDATED_FAILED') return 'badge-error';
  return 'badge-warning';
};

// In the table column render:
render: (status) => (
  <span className={`${getStatusClass(status)} badge-rvn`}>{status}</span>
),

Markup

Preview

ACTIVEDRAFTREJECTED

// React (rate-fe, reference-fe, racar-fe, …)
<span className="badge-rvn badge-success">ACTIVE</span>
<span className="badge-rvn badge-error">REJECTED</span>

SCSS

Add to your module’s assets/scss/layout.scss (SCSS modules can swap the hex for the $color-rvn-*-light-2/3 variables). Plain-CSS modules use the literal hex.

.badge-rvn {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 10px !important;
  font-weight: normal;
  font-size: 11px !important;
}

/* Compound selectors — 0,2,0 specificity beats Bootstrap's fill-style .badge-* (0,1,0). */
.badge-rvn.badge-success { color: #57a35c; background-color: transparent; border: 1px solid #74b978; }
.badge-rvn.badge-pending { color: #adb5bd; background-color: transparent; border: 1px solid #ced4da; }
.badge-rvn.badge-info    { color: #29b6f6; background-color: transparent; border: 1px solid #4fc3f7; }
.badge-rvn.badge-warning { color: #ff9800; background-color: transparent; border: 1px solid #ffb74d; }
.badge-rvn.badge-error   { color: #e57373; background-color: transparent; border: 1px solid #ef9a9a; }

Classes

Name	Type	Default	Description
`badge-rvn`	`class`	—	Base shape — inline-block, 0.1rem 0.55rem padding, 10px radius, 11px font. Always present.
`badge-success`	`class`	—	Green outline. ACTIVE, SUBMITTED.
`badge-info`	`class`	—	Blue outline. APPROVED, VALIDATED_SUCCESSFUL, Running.
`badge-warning`	`class`	—	Amber outline. Fallback / unknown status.
`badge-pending`	`class`	—	Gray outline. PENDING, DRAFT, INACTIVE, UNDONE.
`badge-error`	`class`	—	Red outline. REJECTED, FAILED.

Notes

Always pair the two classes

A colour class without badge-rvn loses its border/colour once embedded in the appshell — Bootstrap’s fill-style .badge-success wins. The compound selector .badge-rvn.badge-success is what makes it robust to CSS load order.

racar-fe is excluded

racar-fe still runs its own badge system in some screens; it is intentionally left out of this standardisation.