Badge
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 node = Badge {
text: "12 new".into(),
..Default::default()
}
.build(ctx, view);
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.