cnc-badge
A small marker pinned to the corner of something else — an unread count on an icon, a status
dot on an avatar. The badge wraps whatever you put inside it, so it needs no positioning of your
own: pick a kind for the colour and a placement for the corner.
Quick start
Wrap the thing being badged. The badge floats over its top-right corner by default.
<cnc-badge label="3" kind="danger">
<cnc-icon name="heroicons/bell" size="lg"></cnc-icon>
</cnc-badge>Usage guidance
A badge belongs on something — it is an overlay on an icon, an avatar or a button, and it
needs an owner to make sense. For a standalone label that sits in the flow of a sentence or a
table cell, use cnc-tag instead. Keep the text to a few characters and cap large
counts at 99+; a badge that grows into a paragraph has stopped being a badge. The
widget provides no accessible name of its own, so when the badge carries meaning — an unread
count, an error marker — make sure the element underneath says the same thing in its own
label.