Badge

Short status markers inline with other content: post state, platform tags, counts. One or two words, read at a glance.

import { Badge } from '@layers/ui/badge'

The three status variants carry the status tokens and a data-status attribute: variant="success" for healthy and completed, variant="warning" for needs-attention, variant="destructive" for failed. Use them instead of restyling another variant. Warning matters most here: without it a needs-attention state becomes raw amber or a stand-in destructive.
Pick a variant; never repaint a badge with raw color utilities.
variant="background" is the page's own material — an opaque, borderless --background fill. Use it for chips that must read as part of the canvas rather than as a tint over it (the brand folder tiles' count badge); reach for secondary when the badge should read as a filled marker.
variant="overlay" is the on-media scrim — semi-opaque black, white text, IDENTICAL in both themes. It is the only variant allowed on top of imagery (avatar tiles, media cards): photographs are not themed, so a themed fill reads in one mode and vanishes into the photo in the other.
size="icon" is the square icon-only badge (a platform mark on a creative card): exactly one icon child plus an aria-label — never size/padding overrides via className.
The verb is "post": status badges read "Posted", never "Published".