Badges

Badges display field values as visual labels on your items, helping users quickly identify categories, statuses, or other important information.

Adding badges

Navigate to your widget and click Edit to open the editor.

Go to the Badges settings

For list view: Go to List Settings → expand the Badges accordion
For details page: Go to Details → expand the Badges accordion

Add a badge field

Click Add Field and select a column from the dropdown. The values from that column will display as badges on your items.

Badges are hidden when using the Table layout. Switch to Cards or List layout to display badges.

Badge position

The available position options depend on your layout:

Cards layout:

In cover image - Displays over the card’s cover image
Above title - Shows above the item title
Below title - Shows below the item title

List layout:

Above title - Shows above the item title
Below title - Shows below the item title

Details page:

Above title - Shows above the item title
Below title - Shows below the item title

Styling badges

Each badge field has its own style settings. Click on a badge field to customize:

Font size - Choose from Small to Extra Large
Font weight - Range from Light through Extra Bold
Shape - Choose between Pill (fully rounded) or Rounded corners

Badge colour modes

Badges support four colour modes, selectable from the Colors dropdown when editing a badge field:

Single

All badges share the same background and text colour. This is the default mode. Set a single background colour and text colour that apply to every badge value.

Source

Automatically uses colours from your data source’s field options. This works with select and multi-select fields from Airtable or Notion that have colours assigned to their options. If the column doesn’t have colour data, badges will fall back to default styling.

Multi

Define a list of background/text colour pairs that rotate through your badge values. For example, if you add 3 colour pairs, the first badge value uses pair 1, the second uses pair 2, the third uses pair 3, and the fourth wraps back to pair 1.

Click Add Color to add a new colour pair
Set the background and text colour for each pair
Remove a pair by clicking the delete icon

Named

Map specific badge values to exact colours. This gives you full control over which values get which colours — useful for statuses, categories, or tiers where each value should have a consistent colour.

Add a mapping

Click Add Mapping to create a new name-to-colour rule.

Configure the mapping

Click on a mapping to open the editor. Set the Name to match the exact badge value (e.g. “Active”, “Tier 1”, “Draft”), then choose the Background and Text colours.

Set fallback colours

Any badge values that don’t match a mapping will use the Fallback colours shown below the mapping list. Adjust these to style unmatched values.

Named colour matching is exact — the badge value must match the mapping name precisely (including capitalisation).

Multiple badges

You can add multiple badge fields to display different information:

Click Add Field again to add another badge
Select a different column for each badge
Style each badge independently with its own colours and shape

Each badge field can have completely different styling, making it easy to visually distinguish between categories, statuses, and other data.

Badges on the details page

Badges can also appear on individual item details pages:

Go to Details → Badges
Click Add Field and select your column
Choose a position (Above title or Below title)
Customize the badge styling

The details page supports the same styling options as the list view, except the “In cover image” position is not available.