The Text component standardizes typography across operational screens. The as prop controls the rendered element (semantics), while variant controls the visual style and defaults to the as value — so heading levels stay correct even when the design calls for a different size.

Import

import { Text } from '@nim-ui/components';

Playground

Edit the code — the preview re-renders as you type.

<div className="flex w-full max-w-md flex-col gap-2">
<Text as="h6">Fulfillment</Text>
<Text as="h2" variant="h3">Shipment SLA-2041</Text>
<Text tone="secondary">Carrier picked up 14 cartons from BKK-02 at 09:40.</Text>
<Text tone="warning" weight="medium">Customs paperwork still pending.</Text>
<Text tone="secondary" truncate>ord_2f9c8a71-44d0-4b7e-9a3d-1c5e8b2f6a90</Text>
</div>

Headings

A compact scale tuned for dense backoffice screens — h6 doubles as an uppercase eyebrow/section label.

<Text as="h1">Heading 1 — Page title</Text>
<Text as="h2">Heading 2 — Section</Text>
<Text as="h3">Heading 3 — Subsection</Text>
<Text as="h4">Heading 4 — Card title</Text>
<Text as="h5">Heading 5 — Dense label</Text>
<Text as="h6">Heading 6 — Eyebrow</Text>

Body text

<Text>Paragraph — the default.</Text>
<Text as="small" tone="secondary">Small — metadata and helper text.</Text>
<Text as="blockquote">Blockquote — quoted content.</Text>

Semantics vs. style

Keep the document outline correct while borrowing another level's visual style.

<Text as="h2" variant="h4">Semantically h2, styled as h4</Text>
<Text as="span" variant="h1">A span wearing h1 styling</Text>

Tones

Restrained status coloring for inline emphasis — use sparingly, per the quiet-hierarchy contract.

<Text>Default — primary ink</Text>
<Text tone="secondary">Secondary — supporting detail</Text>
<Text tone="success">Success — payment settled</Text>
<Text tone="warning">Warning — inventory below threshold</Text>
<Text tone="error">Error — webhook delivery failed</Text>

Weight and truncation

Each element has a sensible default weight (headings semibold/medium, body normal); override it with weight. truncate clips long values to one line.

<Text as="h3" weight="normal">Light heading</Text>
<Text weight="semibold">Semibold body text</Text>
<Text tone="secondary" truncate>ord_2f9c8a71…</Text>

Props

Accessibility

• Heading semantics come from as, not variant — pick as for a correct document outline, then adjust the look with variant if needed.
• Never skip heading levels for visual effect; use variant instead.
• Tone colors meet WCAG 2.1 AA contrast in both light and dark mode, but don't rely on color alone — pair status tones with explicit wording or an icon.

Best Practices

Do

• Use Text for all headings and body copy so the scale stays consistent
• Use as="h6" as an uppercase eyebrow above page or card titles
• Use tone="secondary" for timestamps, metadata, and helper text
• Combine truncate with a fixed-width container for long identifiers

Don't

• Choose as by size — choose it by document structure
• Scatter status tones across a screen; reserve them for genuine state
• Nest Text inside Text when a single element with weight would do

Related Components

• Stat - Metric display with label
• DescriptionList - Key-value record details
• Badge - Status labels