Text
Beta notice: This page is being built.Edit on GitHub(opens in new tab)
Displays View text with Astryx's semantic typography, alignment, wrapping, and truncation controls.
Example
Normal bold and italic text.
Properties
| Text - Properties |
|---|
children Text content.ReactNode |
color Text color; defaults to secondary for supporting text and primary otherwise."primary" | "secondary" | "disabled" | "placeholder" | "accent" | "inherit" |
type Theme text style, or inherit to match surrounding text."code" | "inherit" | "body" | "large" | "label" | "supporting" | "display-1" | "display-2" | "display-3" |
size Font size override for the selected text style."4xs" | "3xs" | "2xs" | "xsm" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" |
weight Font weight override."bold" | "normal" | "medium" | "semibold" |
display Display type. Silently overridden to 'block' when maxLines > 0 or hasCapsize is true."inline" | "block" |
as HTML element to render."label" | "span" | "p" | "div" | "h1" | "h2" | "h3" |
maxLines Maximum visible lines before truncation; 0 disables truncation.number |
hasTruncateTooltip Enables, disables, or positions the tooltip for truncated text.boolean | "start" | "end" | "above" | "below" |
wordBreak Word breaking for truncated text."break-word" | "break-all" |
textWrap Text wrapping behavior."nowrap" | "wrap" | "balance" | "pretty" |
justify Text alignment (justification). Uses logical values (start/end) for i18n/RTL compatibility."start" | "center" | "end" |
hasCapsize Enable optical alignment using text-box-trim. Forces block display.boolean |
hasStrikethrough Apply strikethrough text decoration.boolean |
hasTabularNumbers Use tabular (monospace) numbers for aligned numeric data.boolean |