badge

A small status word on a tinted pill — auto-coloured by common content words unless a variant overrides it.

Example

badge

phone

SPEC.JSONCopy

{ "id": "home", "layout": { "_id": "root", "type": "row", "gap": 8, "padding": 16, "children": [ { "_id": "b1", "type": "badge", "content": "done", "variant": "success" }, { "_id": "b2", "type": "badge", "content": "review", "variant": "warning" }, { "_id": "b3", "type": "badge", "content": "3", "variant": "accent" } ] } }

RENDERED OUTPUTFRAMEWERK RENDERER

donereview3

States

Variant / colour / background override auto-colour. Common to every node: hover / press / focus CSS bags, showWhen / hideWhen, animate.

Stability

This node type is part of the format contract: adding an optional prop is additive; removing the node or narrowing an existing prop is breaking. Prop tables are generated from the schema; this page carries the prose.