components / 18

marked badge

small labels still carry meaning. Cheez gives each one a boundary, a status glyph, or one fast marker stroke.

shadcnnpx shadcn@latest add berkantay/cheez/marked-badge

live

playground

visible

success: early access

tone

variant

size

character

shape

status side

status glyphremovable

<MarkedBadge
  tone="success"
  variant="outline"
  size="medium"
  character="rushed"
  frameMark="rounded-box"
  showStatus
  statusPosition="start"
>
  early access
</MarkedBadge>

signals

meaning before color

glyph plus hidden tone label

defaultdraftdefaultstatus

successsuccess: livesuccess: successsuccess: status

warningwarning: reviewwarning: warningwarning: status

errorerror: blockederror: errorerror: status

infoinfo: newinfo: infoinfo: status

loadingloading: syncingloading: loadingloading: status

drawing

six boundaries

same content, different character

roundcomponent

bubblesuccess: component

cornerswarning: component

bracketserror: component

circleinfo: component

boxloading: component

numbers

counts that cap cleanly

real value stays accessible

0 unread notifications0 unread

success: 1 unread notifications1 unread

warning: 9 unread notifications9 unread

error: 42 unread notifications42 unread

info: 99 unread notifications99 unread

loading: 120 unread notifications120 becomes 99+

interaction

removable collection

each close is a native button

success: reactwarning: accessibilityerror: svginfo: design system

4 selected

composition

product taxonomy

metadata at scan speed

releaseCheez 0.3

success: stablereact 19info: registry

pull requestdraw progress component

warning: needs reviewinfo: 7 commentssuccess: tests pass

workspacebrand system

loading: buildingprivateerror: 2 blockers

reference

api

one semantic span, optional remove button

prop	type	default	purpose
`children`	`ReactNode`	`—`	visible badge label
`tone`	`MarkedBadgeTone`	`"default"`	status glyph and ink
`variant`	`"outline" \| "filled" \| "quiet"`	`"outline"`	boundary treatment
`size`	`"small" \| "medium" \| "large"`	`"medium"`	spacing and type scale
`character`	`CheezCharacter`	`"rushed"`	drawing personality
`frameMark`	`CheezType`	`"rounded-box"`	outline shape
`fillMark`	`CheezType`	`"marker-swipe"`	filled marker shape
`quietMark`	`CheezType`	`"underline"`	quiet emphasis
`frameColor`	`string`	`tone ink`	frame or fill color
`thickness`	`number`	`1`	pen weight
`showStatus`	`boolean`	`tone-aware`	draw leading or trailing glyph
`statusMark`	`CheezType`	`tone glyph`	status override
`statusColor`	`string`	`tone ink`	status glyph color
`statusPosition`	`"start" \| "end"`	`"start"`	glyph placement
`announceTone`	`boolean`	`true`	include hidden status meaning
`count`	`number`	`—`	numeric badge mode
`maxCount`	`number`	`99`	overflow threshold
`getCountLabel`	`function`	`—`	accessible count description
`removable`	`boolean`	`false`	include native remove button
`removeLabel`	`string`	`"remove badge"`	remove-button name
`onRemove`	`MouseEvent handler`	`—`	removal event; prevent default to cancel
`visible`	`boolean`	`—`	controlled visibility
`defaultVisible`	`boolean`	`true`	initial uncontrolled visibility
`onVisibleChange`	`(visible) => void`	`—`	visibility callback

behavior notes

the badge itself is a span; use Marked Button for clickable labels and filters
loading uses three staggered ink marks instead of shrinking a spinner into badge scale
removable mode adds one native button with its own accessible name
do not place a removable badge inside a link or another button
non-default tones announce their meaning even though the drawn glyph is decorative
count overflow changes only the visible text; getCountLabel receives the actual count
preventing default in onRemove keeps the badge visible