Text and status

Use text for inline content, title for a component heading, caption for secondary text, and label beside controls. Markdown supplies document headings, paragraphs, emphasis, lists, and tables.

DIL source

<row gap={2} align="center">
  <badge color="success">Healthy</badge>
  <badge color="warning">Review needed</badge>
  <badge>Draft</badge>
</row>

Tag / attribute	Contract
text, title, caption	Children can contain text, Markdown, and expressions.
size	xs, sm, md, lg, xl, 2xl.
weight	"medium" where supported.
tabularNums	Aligns changing numeric values with tabular glyphs.
color	default, primary, secondary, tertiary, success, warning, danger, or a supported CSS color.
badge	Compact text/status label, with optional semantic color.
icon	A finite Lucide name, optional size (xs, lg, or default), and color.

Pair status colors with explicit text. Icons are decorative; an icon-only action still needs an accessible control name. Stock titles use an h3; use Markdown headings for the document’s section hierarchy.