Text

Import from the root or stable subpath and load Brick styles once:

import { Caption, Eyebrow, Heading, Paragraph, Text } from "@flowstack-ui/brick";
// or
import { Caption, Eyebrow, Heading, Paragraph, Text } from "@flowstack-ui/brick/text";

import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/text.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Public exports include Text, Heading, Paragraph, Caption, Eyebrow, TextProps, HeadingProps, ParagraphProps, CaptionProps, EyebrowProps, HeadingLevel, HeadingVariant, ParagraphVariant, TextElement, TextVariant, TextTone, TextWeight, TextAlign, TextWrap, TextTransform, and TextLineClamp.

<Heading level={2} variant="title-md">
  Account settings
</Heading>
<Paragraph tone="secondary">
  Manage the details used across your workspace.
</Paragraph>

Heading level and variant are independent. Choose level 2 because it is correct in the document hierarchy, not because of its visual size.

• display preserves Brick's original restrained product headline.
• display-sm, display-md, and display-lg provide an explicit authored display scale without coupling size to heading level.
• title-lg, title-md, and title-sm create heading hierarchy.
• body-lg, body-md, and body-sm cover prose and supporting copy.
• caption covers compact metadata without replacing accessible labels.
• eyebrow covers a short uppercase editorial label placed before a heading; it is not body copy, status, or category semantics.
• transform changes visual presentation without rewriting the authored DOM text. CSS capitalize is not language-aware title case; author names and product titles with their correct casing instead.

Display/title recipes use the heading family, semibold weight, tight leading, and restrained negative tracking. Body/caption recipes use the body family, regular weight, and readable leading.

primary means normal high-emphasis text, not brand color. accent is the brand-colored role. Secondary and muted reduce emphasis; info, success, warning, and danger add semantic foreground color but never supply meaning alone.

Use tone="inherit" when Text is intentionally nested in a parent component such as Badge that owns its foreground and contrast pair. When two separately meaningful inline Text nodes form one row, give them compatible typography metrics and use HStack gap for their relationship instead of literal spaces or positional offsets.

Text has no interactive state or motion.

Visual heading independent from semantic level

<Text as="h3" variant="title-lg">
  Billing history
</Text>

Section eyebrow

<Text variant="eyebrow" tone="accent">
  Built for business
</Text>

Eyebrow is a content role, not a generic small-text recipe. Use it only for a short label that introduces a nearby heading.

Supporting and status copy

<Text as="p" tone="secondary">Updated five minutes ago.</Text>
<Text as="p" tone="success">Changes saved successfully.</Text>

Controlled overflow

<Text truncate>One-line project title that may exceed its container</Text>
<Text lineClamp={3}>A longer summary constrained to three visible lines.</Text>

The parent must provide the inline-size constraint.

variant and logical align accept Brick's shared { initial, sm?, md?, lg?, xl? } shape. Use them when visual hierarchy or alignment should adapt while the native host and heading level remain unchanged:

<Heading
  level={1}
  align={{ initial: "center", lg: "start" }}
  variant={{ initial: "display-sm", md: "display-md", lg: "display-lg" }}
>
  A headline with one stable semantic level
</Heading>

Other typography inputs remain scalar. Text wraps naturally, allows long words to break, inherits direction, and imposes no fixed height, width, measure, or surrounding margin.

pretty is a progressive enhancement. Unsupported browsers retain readable normal wrapping.