Skip to main content
Back to Blog
ux statuses badges visual design

Color-Coded Statuses and Badges

Swifty Team Jul 25, 2025 2 min read

Reading a list of records shouldn't require reading every field to understand what's going on. The state of your data should be visible at a glance.

Color-coded badges have been available for status fields in Swifty for a while. This update extends that visual system more broadly and makes it more configurable.

What Changed

More field types support colors. Previously, badge colors were limited to fields explicitly defined as status types. Now any select field can have colors associated with its options — a priority field (low, medium, high), a document type field, a category field. If the field has options, those options can have colors.

Consistent rendering across views. Badges now appear consistently in list views, detail pages, and inline within related record references. The same color for "Overdue" appears whether you're looking at a list of invoices or the invoice relation shown on a project detail page.

Customizable palette. The set of available colors has been expanded from a small fixed set to a full palette. Each option gets its own color independently — you're not limited to traffic-light combinations.

Why Visual Encoding Matters

Humans process color faster than text. A list of 50 records with a color-coded status column can be understood at a glance: mostly green with a few reds in the middle. Finding the problematic records is immediate.

The same list without color requires reading each status value one by one — a small cost per item, but multiplied across regular use, a real friction.

Setting Up Colors

Colors are set in the field definition for each option. Existing status fields with configured transitions already pick up the color automatically if a color was set. For other fields, you can assign colors in the field configuration.

The change applies everywhere that field appears — no need to configure each view separately.

Scannable data is usable data. Color-coded badges are a small change with visible impact every time your team opens a list.

Related posts

Composed Data Sources

Chain and relate data sources for rich dashboards — compose complex data views from simpler sources without writing code.

Computed Expressions

Transform data with template expressions and built-in functions — format, combine, and derive values from your data without code.

Cross-Source Data Joins

Combine data from multiple sources in one view — join records from your database with data from external services using a shared key.