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. Semantic values: bold, subtle, placeholder, disabled, accent, success, caution, critical, information.
• Apply color for semantic meaning. Never pick a color to match a theme or color scheme.
• Color adapts automatically for contrast when Text sits inside a container with an inverted or bold background.
• Font family (family) — sans (default) for general-purpose text, mono for code snippets, technical values, and developer-specific variables.
• Font style (fontStyle) — normal (default) or italic. Use italic sparingly for visual emphasis; use Emphasis when the italic styling also carries semantic meaning.
• Size (size) — xxs, xs, s, m, l, xl, xxl, xxxl. Use s and xs for most cases. Pick a size that creates clear hierarchy against surrounding content.
• Text style (text) — a predefined token bundling font size, weight, line height, and letter spacing (product-h1, product-p, product-label, product-ps, product-code, and other product-* styles). Overrides individual size and weight settings.
• 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 from secondary content through size, weight, and color together. Never style 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).