cnc-tag
A compact label for status, categories, and counts. It carries a colour drawn from the theme palette or derived from its own text, four visual treatments, the full size ladder, an optional icon and status dot, and slots for anything the built-in parts do not cover.
Quick start
A label and a color is the whole of it. Everything else refines the
same tag.
<cnc-tag label="Default"></cnc-tag>
<cnc-tag color="success" label="Active" dot></cnc-tag>
<cnc-tag color="primary" label="Beta" shape="pill"></cnc-tag>
<cnc-tag color="danger" label="Overdue" icon="heroicons/exclamation-triangle"></cnc-tag>Usage guidance
Reach for semantic colours when the tag reports a state a reader should act on, and
auto
when it only needs to distinguish members of an open-ended set — assigning palette colours
by hand to a list that grows is a losing game. Keep the set small: a row where every item is a
differently coloured badge carries no emphasis at all, which is why
modern
exists. And keep tags presentational; the moment one needs to be clicked, removed, or toggled,
the interaction belongs to a control that owns it.