HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
TextView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorText, with its HTML element and its type style set separately.StableSince 0.1.0TypographyUsageimport'@fusion.dev/helix/text'Preview
API ReferenceRoothelix-textText, with its HTML element and its type style set separately.
PropTypeDescriptionas"span"|"p"|"h1"|"h2"|"h3"|"h4"|"h5"|"h6"|"strong"|"em"|"code"The HTML element to render.emphasis"muted"Makes the text quieter. muted sets it in foreground-muted, the quiet
ink the theme engine solves to the contrast target.linesnumberThe most lines to show. Text past the last one is cut off with an
ellipsis.textAlign"start"|"center"|"end"|"justify"How the lines align, set as text-align.textWrap"balance"|"pretty"|"nowrap"How the lines break, set as text-wrap.tone"accent"|"danger"|"info"|"primary"|"success"|"warning"The meaning of the text, shown by its color, such as danger or success.
It is set separately from variant.variant"display"|"heading"|"subheading"|"title"|"body"|"body-strong"|"caption"|"label"|"code"The type style, which sets the size, weight, leading, and tracking.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The text.
PartDescriptiontextThe rendered element.
CSS PropertyDescription--text-font-familyThe typeface. Overrides the ramp's.--text-font-sizeThe size. Overrides the ramp's.--text-font-weightThe weight. Overrides the ramp's.--text-letter-spacingThe tracking. Overrides the ramp's.--text-line-heightThe leading. Overrides the ramp's.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionAppearancesThe text scale from the largest display size down to the smallest.Lines And WrappingA heading balanced over two lines, and a description cut off after two lines.PreviewA heading, a subheading, and a paragraph of body text.TonesEach tone at full strength and at its one quieter step.