Status Label

The Status Label turns any status or choice value into a clean colored pill, so a whole column reads at a glance instead of as plain text. It is built with a standard Microsoft List and a small piece of column-formatting JSON. A leading status dot and a tinted background share one semantic color - green for good, amber for caution, red for problems, and blue for in-progress - and any value that is not mapped, or is blank, falls back to a neutral pill so the column never looks broken. It is one reusable pattern for risk levels, severities, compliance states, and alert statuses.

Author

SharePoint Maven

Built with

• Lists

Features

Choice Column, Date and Time Column, JSON, Person or Group Column, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Renders any status or choice value as a colored pill, so the whole column reads at a glance
• A leading dot and a tinted background share one semantic color – green for good, amber for caution, red for problems, blue for in-progress
• Unmapped or blank values fall back to a neutral gray pill labeled Not set, so the column never looks broken
• One reusable pattern covers risk levels, severities, compliance states, and alert statuses
• Uses the current column, so the same JSON drops onto any choice field without renaming anything
• Applied as column-formatting JSON, so it travels with the view and changes nothing about the underlying data

Common Use Cases

• Risk register status such as On Track, At Risk, and Critical
• Incident severity or priority levels
• Compliance state such as Compliant, In Review, and Non-Compliant
• Alert and monitoring status
• Approval or review workflow stages
• Vendor, project, or service health

Details

• Design Pattern: Status & Indicator Badges
• Format Scope: Column

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Populate the list with data.
3. Because the JSON is applied at the column level, the Status column can use any name you want.
4. It matches values by exact text, so edit the value lists inside the JSON to fit your own choices; anything it does not recognize shows a neutral Not set pill.

How to Apply JSON code

1. On the Status column, open the column header menu, choose Column settings, then Format this column.
2. Switch to Advanced mode.
3. Paste the JSON below and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "align-items": "center",
    "justify-content": "flex-start",
    "height": "100%",
    "width": "100%"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "inline-flex",
        "align-items": "center",
        "box-sizing": "border-box",
        "max-width": "100%",
        "height": "26px",
        "padding": "2px 10px 2px 8px",
        "margin": "3px 0",
        "border-radius": "13px",
        "background-color": "=if((@currentField == 'On Track' || @currentField == 'Approved' || @currentField == 'Compliant' || @currentField == 'Resolved' || @currentField == 'Healthy'), '#d5f2dc', if((@currentField == 'At Risk' || @currentField == 'In Review' || @currentField == 'Pending' || @currentField == 'Monitoring'), '#ffe2b8', if((@currentField == 'Critical' || @currentField == 'Blocked' || @currentField == 'Non-Compliant' || @currentField == 'Overdue'), '#ffd9dd', if((@currentField == 'In Progress' || @currentField == 'New' || @currentField == 'Open' || @currentField == 'Scheduled'), '#e1efff', '#eeeeee'))))"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "8px",
            "height": "8px",
            "border-radius": "50%",
            "margin-right": "7px",
            "flex-shrink": "0",
            "background-color": "=if((@currentField == 'On Track' || @currentField == 'Approved' || @currentField == 'Compliant' || @currentField == 'Resolved' || @currentField == 'Healthy'), '#159447', if((@currentField == 'At Risk' || @currentField == 'In Review' || @currentField == 'Pending' || @currentField == 'Monitoring'), '#d98200', if((@currentField == 'Critical' || @currentField == 'Blocked' || @currentField == 'Non-Compliant' || @currentField == 'Overdue'), '#e01e37', if((@currentField == 'In Progress' || @currentField == 'New' || @currentField == 'Open' || @currentField == 'Scheduled'), '#0878cf', '#9b9b9b'))))"
          }
        },
        {
          "elmType": "span",
          "style": {
            "font-size": "13px",
            "font-weight": "700",
            "line-height": "20px",
            "white-space": "nowrap",
            "overflow": "hidden",
            "text-overflow": "ellipsis",
            "color": "=if((@currentField == 'On Track' || @currentField == 'Approved' || @currentField == 'Compliant' || @currentField == 'Resolved' || @currentField == 'Healthy'), '#006b2b', if((@currentField == 'At Risk' || @currentField == 'In Review' || @currentField == 'Pending' || @currentField == 'Monitoring'), '#9a5600', if((@currentField == 'Critical' || @currentField == 'Blocked' || @currentField == 'Non-Compliant' || @currentField == 'Overdue'), '#b21f32', if((@currentField == 'In Progress' || @currentField == 'New' || @currentField == 'Open' || @currentField == 'Scheduled'), '#075da8', '#555555'))))"
          },
          "txtContent": "=if(@currentField == '', 'Not set', @currentField)"
        }
      ]
    }
  ]
}

Common Questions About the Status Label