A badge identifies a state or category beside a specimen. It is static text, so an action still needs a real button or link. The adopted treatment keeps the Guide’s restrained annotation style and sharpens the shared badge.
Adopted direction: the shared badge has a smaller radius and balanced monospace inset. The original Guide remains unchanged.
State labels beside an object
All three treatments use the same subject and comparison content. Labels sit outside the objects being demonstrated.
01
Original Guide
Plain labels above specimens
Subject
Subject surface
Comparison
Comparison surface
Selected
Selected surface
Informational note
Informational note surface
The Guide uses small text labels, without a standalone state badge. Its demo and object styling remain unchanged.
02
Previous
Earlier shared badge
Subject
Subject surface
Comparison
Comparison surface
Selected
Selected surface
Informational note
Informational note surface
The current badge inherits item paint and has a compact, font-relative inset.
03
Adopted
Precise state annotation
Subject
Subject surface
Comparison
Comparison surface
Selected
Selected surface
Informational note
Informational note surface
A smaller radius, balanced padding and tabular monospace type keep the chip crisp across tones and sizes.
Size and long-text states
xsSelected layer 24
smSelected layer 24
mdSelected layer 24
lgSelected layer 24
wrapcomparison at a narrow viewport
The chip has no hover behavior or focus stop. The long label wraps instead of forcing horizontal overflow.
Actual Reference scene
Border color uses direct subject and comparison labels with the real Master CSS classes.