> For the complete documentation index, see [llms.txt](https://docs.notionapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.notionapps.com/how-to-guides/select-option-badges.md).

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

{% hint style="info" %}
**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.
{% endhint %}

***

#### 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](https://iili.io/Cwe3bnI.png)

***

#### 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

* [ ] 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    |

***

#### Related reading

* [Status and People Field Fidelity](https://docs.notionapps.com/guides/status-and-people-field-fidelity)
* [Board layouts and Details polish (overview)](https://docs.notionapps.com/guides/board-layouts-and-details-polish)
* [20 Jul 2026 Release](https://docs.notionapps.com/release-notes/20-jul-2026-release)

## 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)](https://docs.notionapps.com/screens-and-components/types-of-screens/list-view-items), [Details](https://docs.notionapps.com/screens-and-components/types-of-screens/details-view-one-item), [Form (Add Item)](https://docs.notionapps.com/screens-and-components/types-of-screens/add-new-item-form), [Form (Update One Item)](https://docs.notionapps.com/screens-and-components/types-of-screens/form-update-one-item), [List (Update Items)](https://docs.notionapps.com/screens-and-components/types-of-screens/update-items-form), [Content](https://docs.notionapps.com/screens-and-components/types-of-screens/content)
* Everyday chrome / Queue & activity: see the [Types of Screens](https://docs.notionapps.com/screens-and-components/types-of-screens) index
* Automation native screens: [Native Automation Screens](https://docs.notionapps.com/screens-and-components/types-of-screens/native-automation-and-operational-screen-guides)

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