Neon Glow Badge

The Neon Glow Badge shows a status as a dark chip with a glowing colored outline, giving standout states a cyberpunk, dashboard-at-night look that pulls the eye. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a choice column. Each status gets its own glow color, with the word bright against a dark pill.

Author

SharePoint Maven

Built with

• Lists

Features

Choice Column, JSON, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Shows a status as a dark chip with a glowing outline
• Each status gets its own neon glow color
• Bright text on a dark pill pulls the eye to standout states
• A modern, high-contrast look for dashboards
• The words, colors, and glow are set in the JSON
• Applied as column-formatting JSON on a choice column, so it changes nothing about the underlying data

Common Use Cases

• Live or on-air status on a broadcast list
• Priority or escalation flags
• Online or active states on a monitor
• Featured or promoted items
• Alert or incident states
• Any status you want to make glow

Details

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

Required Columns

Prerequisites

1. Build a list with a choice column for the status before you paste the JSON.
2. Then populate the list with status values.
3. The JSON keys off specific words (Live, Priority, Online, Standby); use these exact words in your choice column or edit the words in the JSON to match yours.
4. Apply the formatting to the status column.

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",
    "height": "100%",
    "box-sizing": "border-box"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "display": "inline-flex",
        "align-items": "center",
        "justify-content": "center",
        "box-sizing": "border-box",
        "width": "82px",
        "height": "24px",
        "padding": "0 8px",
        "border-radius": "12px",
        "font-size": "12px",
        "font-weight": "700",
        "letter-spacing": "0.4px",
        "line-height": "1",
        "white-space": "nowrap",
        "background-color": "#0b1020",
        "color": "=if(@currentField == 'Live', '#7df9ff', if(@currentField == 'Priority', '#ff9ae0', if(@currentField == 'Online', '#a7f3d0', '#c7d2fe')))",
        "border": "1.5px solid",
        "border-color": "=if(@currentField == 'Live', '#22d3ee', if(@currentField == 'Priority', '#ec4899', if(@currentField == 'Online', '#34d399', '#818cf8')))",
        "box-shadow": "=if(@currentField == 'Live', '0 0 8px rgba(34,211,238,0.8), inset 0 0 6px rgba(34,211,238,0.35)', if(@currentField == 'Priority', '0 0 8px rgba(236,72,153,0.8), inset 0 0 6px rgba(236,72,153,0.35)', if(@currentField == 'Online', '0 0 8px rgba(52,211,153,0.8), inset 0 0 6px rgba(52,211,153,0.35)', '0 0 8px rgba(129,140,248,0.8), inset 0 0 6px rgba(129,140,248,0.35)')))"
      }
    }
  ]
}

Common Questions About the Neon Glow Badge