Text

Usage

• Use Text as the foundational typography component for inline text that has no more specific semantic component.
• Reach for a semantic component first: Code for monospace code snippets, Emphasis for stressed emphasis (<em>), Heading for <h1>–<h6> document structure, Paragraph for <p>, Strong for strong visual emphasis (<strong>), TextLabel for form control labels and metadata (<label>).
• Fall back to Text only when none of those apply.
• Heading, Paragraph, and TextLabel are built on Text and inherit its styling props.

Appearance

• Color (color) — defaults to "base". Available values: base, bold, subtle, placeholder, disabled, accent, success, caution, critical, information, inherit. Colors automatically adapt for contrast on inverted or bold backgrounds.
• Apply colors for semantic meaning only. Never select colors to follow a visual theme.
• Pair color with supporting text or iconography — never use color as the sole indicator of meaning.
• Font family (family) — "sans" (default) or "mono". Use mono for code, IDs, and technical values.
• Font style (fontStyle) — "normal" (default) or "italic". Use italic for visual emphasis without semantic meaning; use the Emphasis component when semantic meaning is required.
• Size (size) — xxs, xs, s, m, l, xl, xxl, xxxl. The most common sizes are s and xs. Choose sizes that create clear hierarchy relative to surrounding content.
• Text style (text) — a predefined token that bundles size, weight, line height, and letter spacing. Overrides individual size and weight settings. Available product styles include product-h1 through product-h4, product-p, product-psm, product-pxs, product-label, product-code, and their secondary/active variants.
• Weight (weight) — light for minimal emphasis, regular (default body), medium for inline labels, semibold for primary values and key information, bold for prominent content, heavy for maximum contrast used sparingly.
• Prefer Strong when bold visual emphasis and semantic meaning matter equally.
• Differentiate primary and secondary content through a combination of size, weight, and color. Avoid styling content at different levels of importance identically.
• Pair smaller font sizes with subtler colors for secondary information and subtitles when not using a preset text style.

Behaviors

• Text wraps naturally within its container, using a wrapping algorithm that avoids widows.
• Enable truncation (truncate) to clip overflowing text with an ellipsis. Pair truncation with a Tooltip so the full content stays accessible.

Content

• Follow the Pluma Foundations content guidelines. For component-specific rules, refer to that component's own content section.

Implementation Notes

• Text renders a <span> by default. Change the element with the polymorphic as prop (React) or @as arg (Ember).
• Pass content as children in React and through the default block ({{yield}}) in Ember.
• Text extends Box, so all Box layout and sprinkle props (display, padding, textAlign, whiteSpace, and the rest) are available.
• truncate is a boolean Box sprinkle. Setting it forces display: "block" unless display is passed explicitly.
• color accepts every default text color token, not only the semantic set above — active, black, code, invert, minimal, white, and inherit are also valid.
• size accepts every font-size token, including button alongside the xxs–xxxl scale.
• The default sans family is applied only when neither text nor family is set — a text style supplies its own family (for example product-code is monospace).
• Ember invocation is <PlumaText> with @-prefixed args (@size, @color, @weight, @text, @family, @fontStyle).