Component catalog
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Render styled body, heading, caption, and label text with SwiftUI-grade typographic fidelity.
import { Text } from "@liquidify/react/text"| Prop | Type | Default | Description |
|---|---|---|---|
| as | As | undefined | span | The rendered HTML element — polymorphic over the inline/block typographic set, so Text carries the right semantics (`<p>`, `<strong>`, `<code>`, …). Drives the {@link TextProps.ref} target type: `<Text as="p">` narrows `ref` to `Ref<HTMLParagraphElement>`, not a bare `Ref<HTMLElement>`. |
| children | ReactNode | — | The content to render with the resolved typography. |
| className | string | undefined | — | Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean. |
| color | TextColor | undefined | primary | Apple label-colour hierarchy — `"primary"` (default), `"secondary"`, `"tertiary"`, or `"quaternary"` (increasing de-emphasis) — or `"inherit"` to take the colour of the surrounding host. Theme-aware via `light-dark()`; the `-ic` increased-contrast variants apply automatically through the token cascade. Ignored when {@link TextProps.tint} is set. `"inherit"` is the seam for a Text nested inside a colour-bearing element (an accent picker trigger, a state-recoloured toggle-button label): it emits `data-color="inherit"` so the type inherits the host's colour instead of forcing a label-hierarchy colour (ADR-0028). |
| italic | boolean | undefined | false | Italic styling (SwiftUI `.italic()`) — `font-style: italic` via `data-italic`. |
| lineHeight | TextLineHeight | undefined | — | Line height — a named leading scale (the SwiftUI `.lineSpacing(_:)` analogue). Overrides the variant's baked line-height via `data-leading` → `--lq-line-height-*`. When omitted, the variant's own leading applies. |
| ref | Ref<HTMLElementFor<As>> | undefined | — | Forwarded ref to the rendered element — its type is conditional on {@link TextProps.as} via {@link HTMLElementFor}: `HTMLSpanElement` by default, `HTMLParagraphElement` for `as="p"`, `HTMLPreElement` for `as="pre"`, `HTMLDivElement` for `as="div"`, and `HTMLElement` for the remaining inline tags (`b · strong · i · em · code · sup · sub`) — never a bare `Ref<HTMLElement>` (charter §4). |
| tint | "red" | "orange" | "yellow" | "green" | "mint" | "teal" | "cyan" | "blue" | "indigo" | "purple" | "pink" | "brown" | "gray" | undefined | — | Optional system-colour text — the SwiftUI `.foregroundStyle(Color.<hue>)` analogue, drawn from the restricted thirteen-hue {@link LiquidColor} palette and resolved via the shared `[data-tint]` → `--lq-tint-current` map. When set, it overrides {@link TextProps.color}. |
| tracking | TextTracking | undefined | — | Letter-spacing — a named tracking scale (the SwiftUI `.tracking(_:)` analogue). Overrides the variant's baked tracking via `data-tracking` → `--lq-letter-spacing-*`. When omitted, the variant's own tracking applies. |
| transform | TextTransform | undefined | — | Text case — the SwiftUI `.textCase(_:)` analogue; CSS `text-transform` via `data-transform`. When omitted, the text renders as authored. |
| variant | TextStyle | undefined | body | The Apple Dynamic Type style — the primary typographic axis (SwiftUI `Font.TextStyle`). Resolves size + line-height + letter-spacing together via the `data-variant` selector. |
| weight | TextWeight | undefined | — | Font weight (SwiftUI `Font.Weight`), resolved to `--lq-font-weight-*` via `data-weight`. When omitted, the weight baked into {@link TextProps.variant} applies (e.g. `headline` is semibold); an explicit value overrides it. |
| wrap | TextWrap | undefined | — | Wrapping behaviour via `data-wrap`: `"nowrap"` (single line), `"balance"` / `"pretty"` (CSS `text-wrap`), or `"breakWord"` (break long unbreakable strings). When omitted, text wraps normally. |
Text preserves the semantics of its content and should be given a clear accessible label when its visible content does not provide one.
| Name | Value |
|---|---|
| --lq-color-label- | #000000#ffffffrgba(60, 60, 67, 0.6)rgba(235, 235, 245, 0.6)rgba(60, 60, 67, 0.3)rgba(235, 235, 245, 0.3)rgba(60, 60, 67, 0.18)rgba(235, 235, 245, 0.16)rgba(60, 60, 67, 0.8)rgba(235, 235, 245, 0.8)rgba(60, 60, 67, 0.4)rgba(235, 235, 245, 0.36) |
| --lq-font-family-sans | Inter, Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif |
| --lq-font-size- | 0.625rem0.6875rem0.75rem0.8125rem0.9375rem1.0625rem1.375rem1.625rem |
| --lq-font-weight- | 100200300400500600700800900 |
| --lq-font-weight-regular | 400 |
| --lq-font-weight-semibold | 600 |
| --lq-glass- | 440.71.15var(--lq-segmented-control-indicator-blur)calc(var(--lq-glass-material-blur) * 8)var(--lq-shadow-presentational) |
| --lq-letter-spacing- | 0.004375rem0rem-0.015rem-0.019375rem-0.025625rem-0.023125rem0.021875rem0.0225rem0.023125rem0.025rem |
| --lq-line-height- | 1.151.181.21.221.251.281.341.411.11.41.6 |
| --lq-tint-current | var(--lq-color-accent)light-dark( var(--lq-color-system-blue-default-light, var(--lq-color-accent)), var(--lq-color-system-blue-default-dark, var(--lq-color-accent)) )light-dark( var(--lq-color-system-brown-default-light, var(--lq-color-accent)), var(--lq-color-system-brown-default-dark, var(--lq-color-accent)) )light-dark( var(--lq-color-system-cyan-default-light, var(--lq-color-accent)), var(--lq-color-system-cyan-default-dark, var(--lq-color-accent)) )light-dark( var(--lq-color-system-green-default-light, var(--lq-color-accent)), var(--lq-color-system-green-default-dark, var(--lq-color-accent)) )light-dark( var(--lq-color-system-indigo-default-light, var(--lq-color-accent)), var(--lq-color-system-indigo-default-dark, var(--lq-color-accent)) )light-dark( var(--lq-color-system-mint-default-light, var(--lq-color-accent)), var(--lq-color-system-mint-default-dark, var(--lq-color-accent)) )light-dark( var(--lq-color-system-orange-default-light, var(--lq-color-accent)), var(--lq-color-system-orange-default-dark, var(--lq-color-accent)) )light-dark( var(--lq-color-system-pink-default-light, var(--lq-color-accent)), var(--lq-color-system-pink-default-dark, var(--lq-color-accent)) )light-dark( var(--lq-color-system-purple-default-light, var(--lq-color-accent)), var(--lq-color-system-purple-default-dark, var(--lq-color-accent)) )light-dark( var(--lq-color-system-red-default-light, var(--lq-color-accent)), var(--lq-color-system-red-default-dark, var(--lq-color-accent)) )light-dark( var(--lq-color-system-teal-default-light, var(--lq-color-accent)), var(--lq-color-system-teal-default-dark, var(--lq-color-accent)) ) |