Text
Body text on Merid's type scale. Hierarchy comes from the three text tones and weight — not from colour and never from bold.
Merid separates regions by surface before border, keeps one accent for interaction, and lets tone and weight carry hierarchy.
<Text prose>
Merid separates regions by surface before border, keeps one accent for
interaction, and lets tone and weight carry hierarchy.
</Text>Import
import { Text } from "@merid/react";Examples
Sizes
lg is the 18px lead, md the 16px body (default), stepping down to the 12px 3xs caption.
lg: lead paragraph, 18px
md: body, 16px
sm: secondary text
xs: dense UI text
2xs: meta
3xs: caption, 12px
<Text size="lg">lg: lead paragraph, 18px</Text>
<Text size="md">md: body, 16px</Text>
<Text size="sm">sm: secondary text</Text>
<Text size="xs">xs: dense UI text</Text>
<Text size="2xs">2xs: meta</Text>
<Text size="3xs">3xs: caption, 12px</Text>Tones
ink, body (default) and muted are the hierarchy tones. accent and danger are for the rare text that must carry meaning through colour.
ink: headings and strong text
body: default running text
muted: meta only
accent: interactive emphasis
danger: error copy
<Text tone="ink">ink: headings and strong text</Text>
<Text tone="body">body: default running text</Text>
<Text tone="muted">muted: meta only</Text>
<Text tone="accent">accent: interactive emphasis</Text>
<Text tone="danger">danger: error copy</Text>Weights
Regular
Medium
Semibold
<Text weight="regular">Regular</Text>
<Text weight="medium">Medium</Text>
<Text weight="semibold">Semibold</Text>Numbers and other elements
numeric turns on tabular numerals so figures line up. as renders another element — span inside a line, small, div.
1,204.50
987.10
Rendered as a span<Text numeric>1,204.50</Text>
<Text numeric>987.10</Text>
<Text as="span" size="sm" tone="muted">Rendered as a span</Text>API reference
Text renders a <p> by default, forwards its ref and passes other HTML attributes through.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "lg" | "md" | "sm" | "xs" | "2xs" | "3xs" | "md" | Type scale step: lg 18px lead down to 3xs 12px caption. |
tone | "ink" | "body" | "muted" | "accent" | "danger" | "body" | Text tone. |
weight | "regular" | "medium" | "semibold" | "regular" | Font weight. There is no bold. |
numeric | boolean | false | Uses tabular numerals. |
prose | boolean | false | Caps the line length at the 720px reading width. |
as | ElementType | "p" | Element or component to render instead. |
Styling
| Hook | Values |
|---|---|
.mrd-text | Root element |
data-size | lg · md · sm · xs · 2xs · 3xs |
data-tone | ink · body · muted · accent · danger |
data-weight | regular · medium · semibold |
data-numeric | Present when numeric |
data-prose | Present when prose |
There are no text-specific variables; sizes and tones read the global typography and colour tokens.
Accessibility
mutedfalls below 4.5:1 on the page background in light mode. Use it for meta text only, never for content a reader must understand.- Do not convey meaning through
accentordangercolour alone — pair it with wording or an icon.
Guidelines
Do
Build hierarchy with ink / body / muted and medium weight.
Avoid
Colour text blue for emphasis, or reach for a heavier weight than semibold.