Select Option Badges

Show Notion Select (and Status) options as colored badges/chips in lists and Details so Priority, Stage, and similar fields match Notion’s colors.

What changed Select options use Notion option colors for list tags and Details chips (for example Priority P1 in red). This complements Status color fidelity from the same release family.

What you get

Surface

Behavior

List tags

Select options use Notion colors when tag colors are seeded / synced

Details chips

Select values render as colored badges

Status

Continues to use Notion status colors (see Status & People guide)

Before you start

A Notion Select (or Status) property with colored options
That property mapped on List and/or Details
Reload Data after you change option colors in Notion

Step 1 — Sync option colors

In Notion, set option colors on your Select property (for example P1 = red, P2 = orange).
In the builder, click Reload Data.
Open a List that tags by that Select field and confirm tag colors match Notion.

Step 2 — Confirm Details badges

Open Details for a record with a Select value (for example Priority = P1).
Confirm the value appears as a colored badge/chip, not plain unstyled text.
Change the option in Notion or via an Update Form, Reload/Publish as needed, and re-check.

Checklist

Select options have colors in Notion
Reload Data completed
List tags reflect those colors
Details shows a colored badge for the Select value
App is Published after layout changes

Troubleshooting

Symptom

Likely cause

Fix

All tags one color

Stale metadata

Reload Data; republish

Badge missing on Details

Component still plain Details/text

Use chip-capable display / ensure Select field is mapped

Color wrong vs Notion

Option renamed/recolored

Reload Data; clear cache / hard refresh published app

Builder options at a glance

This guide teaches a focused maker workflow. For the full screen option inventory (What it does / How to use / Why) and annotated builder screenshots, use the matching Types of Screens guide:

Data screens: List (View Items), Details, Form (Add Item), Form (Update One Item), List (Update Items), Content
Everyday chrome / Queue & activity: see the Types of Screens index
Automation native screens: Native Automation Screens

Recommended defaults

Change one option family at a time, then publish and test on phone and desktop.
Prefer screen-level settings in Content / Behaviour / Appearance before custom CSS/JS.
Keep public access and navigation visibility intentional on every screen you link from this guide.