Token-driven body text for calm product interfaces.
Text provides consistent body copy, tone, weight, alignment, and truncation while keeping the rendered element explicit.
Text renders a paragraph by default.
EnterUI typography stays calm by default, with enough hierarchy for dense product interfaces.
<Text>EnterUI typography stays calm by default, with enough hierarchy for dense product interfaces.</Text>import { Text } from "@froggdesign/enter-ui-react";Choose the semantic element that matches the surrounding content.
Paragraph text for normal content blocks.
Inline muted textSmall supporting textStrong emphasisEmphasized copyUse larger text sparingly inside component surfaces.
Extra small metadata
Small product copy
Default body text
Large supporting copy
Semantic tones should support text, not replace it.
Default message
Muted secondary message
Subtle metadata
Sync completed
Quota approaching
Build failed
New docs are available
Weights map to FroggDesign typography tokens where available.
Regular
Medium
Semibold
Bold
Text renders native text elements. Pick as for document meaning: use p for paragraphs, span for inline text, strong for strong importance, and em for stress emphasis. Do not rely on tone alone for critical status.
as: p, span, div, small, strong, or em.size: xs, sm, md, or lg.weight: regular, medium, semibold, or bold.tone: default, muted, subtle, success, warning, error, or info.align: left, center, or right.truncate: applies single-line overflow truncation.className.Text uses .eui-text with data-size, data-weight, data-tone, data-align, and data-truncate. Override spacing or color through className and FroggDesign variables instead of inline styles.