Chips and badges

Chips and badges let you show live, context-aware UI labels in your app. They keep information fresh while the viewer stays on the same screen, which can make live experiences feel more responsive. Use them to highlight information like game state, score changes, and content state (for example, Live or New).

What chips and badges are

Terms

Chip: A small label, usually text-based, that describes state or context (for example, Live, Final, New).
Badge: A small indicator that sits on or near a UI element (for example, an icon overlay in a corner).

In many layouts, chips are easier to scan for text. Badges work well for compact indicators (like an icon) when space is limited.

Use chips and badges to:

Update in real time when the underlying data changes.
Let you vary text and visibility based on context like content type, time, or viewer state.
Support full visual customization so they match your app design (color, typography, shape, and position).

How it works

At a high level, chips and badges render from:

Data: the values you already have in your app
Rules: the logic your app uses to decide what to show (text, visibility, and variants)
Theme: visual styling (colors, typography, size, and position)

Choose your data points

Decide which data points you want to expose through chips and badges for a widget.

Examples of data points:

Score
Game status (live, halftime, final)
Period and time remaining
Content state (new, unread, read)

Customize how it looks

Use theme and layout options to control:

Text formatting (for example,2-1, Live, Final)
Colors and typography
Shape (radius, padding)
Position relative to the thumbnail or player UI

See how it looks in your app

To validate the design and behavior, test with a few representative states that your app can drive, like:

Pre-game, live, and final
Score changes
New vs read content

Use the same data your app already has, and verify that chips and badges remain readable across themes, backgrounds, and screen sizes.

Examples

These examples describe common patterns. Your app controls the logic and formatting.

Display live score in a chip

Use the same score data your app already renders in a results page, then format it for the chip.

Examples:

Show the score as 2-1
Change the chip color when a goal is scored
Show a different format in the chip than the main UI (for example, shorten team names)

Display state-based text in a chip

Change the chip text based on game status.

Example logic:

Before kickoff: show Pre-game
During the match: show Live
After the match: show Final

Display a rank-based badge

Show an icon badge based on rank or status, and update it when the underlying value changes.