Badge

Fission

Product

▾

Setup

›

›

Badge is the compact pill for short status text.

Use it when the user needs a quick count or classification next to a larger piece of content, such as an unread count, environment label, or short state marker. A badge should support the main content, not replace it.

Example

use fission::prelude::*;

let widget: Widget = Badge {
    text: "12 new".into(),
    ..Default::default()
}
.into();

This works well beside a folder title, page header, or list row label.

Field table

Field	Type	Meaning	Notes / default behavior
text	String	Short label shown inside the badge.	Required. Keep it brief.
color	Option<Color>	Background color override.	Defaults to the theme's secondary color.
text_color	Option<Color>	Text color override.	Defaults to the theme's on-secondary color.

user experience intent

A badge is best when it adds context to something else. If the count or status is the main point of the screen, a larger widget such as Stat is usually clearer.

The checked-in badge is purely visual. It is not interactive, and it does not expose special semantics beyond the text it renders.

Specific advice

Do not cram long phrases into a badge. Once the text needs a sentence, it is not badge-shaped information anymore.

Production checklist

For Badge, review the fields that change behavior before treating the widget as finished: text, color, text_color. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Badge setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Tag, Stat, Alert, and Text.