Tag

Fission

Product

▾

Setup

›

›

Tag is the removable or static chip for short labels.

Use it for active filters, selected categories, recipients, or other compact labels that the user may need to scan quickly and optionally dismiss.

Example

use fission::prelude::*;

let widget: Widget = Tag {
    label: "Unread only".into(),
    on_close: Some(clear_unread_filter_action),
}
.into();

When on_close is absent, the same widget becomes a simple non-removable label chip.

Field table

Field	Type	Meaning	Notes / default behavior
label	String	Text shown inside the chip.	Required.
on_close	Option<ActionEnvelope>	Action fired by the small close button.	Defaults to None. When present, the widget renders a close affordance.

Usage guidance

A removable tag should remove something real from app state, such as a filter or recipient. If pressing the close icon does not clearly map to a user-visible change, the control can feel confusing.

Production checklist

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

•

Bind on_close to explicit reducer actions and test that the reducer handles unavailable, duplicate, or invalid input safely.

•

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 Tag 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.

Badge, Breadcrumb, Button, and Wrap.