Text

Use cases

All on-screen text within MiHCM products.
Headings, body copy, captions, status messages.
Anywhere you'd reach for <p> or <span> and want consistent typography across web + native.

For semantic headings (h1..h6 on web), wrap Text with the appropriate element. On native, the screen-reader role does the work.

Size	Use case
`xs`	Captions, fine print, table footers
`sm`	Secondary copy, form helper text
`base`	Default body text — 16px
`lg`	Lead paragraphs, prominent body
`xl`	Subheadings
`2xl`	Section headings
`3xl`	Page section openers
`4xl`	Page titles
`5xl`	Hero / display

Body line-length is best between 45–75 characters. The component does not enforce this; your container's max-w-prose should.

Tone	Use when
`default`	Body, neutral content.
`muted`	De-emphasized supporting copy.
`destructive`	Error / alert / delete-confirm copy.
`success`	Success messages, positive metrics.
`warning`	Warnings — pair with an icon, never color-only.

Tone is never the only signal. Pair destructive/warning text with an icon or label so colorblind users are not excluded.

Button — paired with text in CTAs.
Planned: Heading (semantic h1..h6 wrapper), Inline (inline-styled fragments).