components

Text

A typography component for rendering text with configurable size, weight, color, and alignment.

Show code

The quick brown fox jumps over the lazy dog.

API Reference

TextProps

Extends native HTML attributes inferred from the rendered element `as`.

Property	Type	Default	Description
`as`	`ElementTag`	"span"	HTML element to render as.
`ref` $bindable	`HTMLElement`		Reference to the rendered DOM element. The element type is inferred from `as`.
`color`	`union`		Text color
`size`	`union`	"3"	Font size
`weight`	`union`	"regular"	Font weight
`transform`	`union`		Text transform
`align`	`union`	"start"	Text alignment
`wrap`	`union`		Wrap text mode
`underline`	`union`	"none"	Text decoration underline
`truncate`	`boolean`	false	Truncate text with ellipsis
`muted`	`boolean`	false	Mute text (like disabled without aria-disabled)
`disabled`	`boolean`	false	Disable text
`children`	`Snippet`		Text content to render

Examples

Colors

Show code

default neutral blue green yellow orange red

Sizes

Show code

Sample size 1 Sample size 2 Sample size 3 Sample size 4 Sample size 5 Sample size 6 Sample size 7 Sample size 8 Sample size 9

States

Show code

Sample default Sample muted Sample disabled

Text align

Show code

Sample start Sample center Sample end

Text transform

Show code

Sample lowercase Sample uppercase Sample capitalize

Truncate

Show code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt elit mattis sem mollis, sit amet dapibus arcu commodo. Morbi non aliquam sapien. Quisque pretium.

Weights

Show code

Sample light Sample regular Sample medium Sample bold