For the complete documentation index, see llms.txt. This page is also available as Markdown.

Select Option Badges

Select Option Badges

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)

Details with Priority P1 badge and other Wave C view comps

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

  1. In Notion, set option colors on your Select property (for example P1 = red, P2 = orange).

  2. In the builder, click Reload Data.

  3. Open a List that tags by that Select field and confirm tag colors match Notion.


Step 2 — Confirm Details badges

  1. Open Details for a record with a Select value (for example Priority = P1).

  2. Confirm the value appears as a colored badge/chip, not plain unstyled text.

  3. Change the option in Notion or via an Update Form, Reload/Publish as needed, and re-check.


Checklist


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:

  • 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.