Text · astryx-svelte

Usage

Text renders styled body text and headings from the theme. Use Text with a semantic type for body copy, labels, and captions, and Heading for section titles that output the correct h1–h6 element.

ts
 
import { Text } from '@astryx-svelte/core';

Best practices

Guidance	Practices
Do	Pick a semantic type (body, label, supporting, large, code) instead of manually setting size and weight; the theme handles the details.
Do	Set accessibilityLevel on Heading when the visual level differs from the document outline so screen readers announce the correct hierarchy.
Do	Use maxLines with a number to truncate long content; a tooltip appears automatically on hover so no text is lost.
Do	Enable hasTabularNumbers for columns of numeric data so digits align vertically across rows.
Don't	Override size and weight when a semantic type already matches; extra overrides fight the theme and break when themes change.
Don't	Skip heading levels in the document outline; go h1 then h2 then h3, never h1 then h3.
Don't	Use raw HTML tags like <p>, <h1>–<h6>, or <span> for text; Text and Heading apply the correct theme tokens automatically.
Don't	Pass a `variant` prop; Text does not have a `variant` prop. Use `type` for semantic styling (body, label, large, supporting, code) or use Heading for headings.
Don't	Use Text for headings; use Heading with a `level` prop (1–6) for section titles and headings.

Examples

Common configurations, variations, and states.

Text — Colors

All text color options (primary, secondary, disabled, placeholder, active) applied to body text to show their intended use.

Text — Heading Levels

All 6 heading levels (h1 through h6) rendered with Heading to show the full type scale.

Text — Inline

Mixing body and code text inline within a single line using the default inline display mode.

Text — Truncation

Single-line and multi-line text truncation with ellipsis using maxLines in a width-constrained container.

Text — Types

All 5 semantic text types (body, large, label, supporting, code) with their default styling from the theme.

Text — Weight

The 4 font weight variants (normal, medium, semibold, bold) applied to body text.

Text — Word Break

Compares break-word and break-all word break modes on a long unbreakable string.

Text — Wrap

The 4 text-wrap modes (wrap, nowrap, balance, pretty) shown in width-constrained containers.