MiHCM
primitives/@mihcm/ui·v0.21.0·stable

Text

Type primitive. Type scale, weight, and tone — semantic tokens only.

ConfiguratorExamplesUsageAccessibilityApi

Use cases

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

When NOT to use

  • For layout-only spacing. Use container utilities and keep Text focused on readable content.

Type scale

SizeUse case
xsCaptions, fine print, table footers
smSecondary copy, form helper text
baseDefault body text — 16px
lgLead paragraphs, prominent body
xlSubheadings
2xlSection headings
3xlPage section openers
4xlPage titles
5xlHero / display

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

Tone

ToneUse when
defaultBody, neutral content.
mutedDe-emphasized supporting copy.
destructiveError / alert / delete-confirm copy.
successSuccess messages, positive metrics.
warningWarnings — 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.

Composition

  • Use as="h1"–as="h6" on web for semantic headings. On native, those values map to accessibilityRole="header" unless you override it.
  • Use as="p" for paragraphs and keep the default as="span" for inline text.
  • Use className="max-w-prose" on the container to keep body text at a readable 45–75 character line length.
  • Combine tone="muted" with size="sm" for form helper text and captions.
<Text as="h2" size="3xl" weight="bold">
  Team attendance
</Text>
 
<Text as="p" tone="muted">
  View policy exceptions and approvals in one place.
</Text>
  • Label — form-field labels with htmlFor binding.
  • Badge — inline status pill that pairs with text.
  • Button — paired with text in CTAs.