Text

A customizable text component.

The quick brown fox jumps over the lazy dog.

<script lang="ts">
    import { Text } from 'svxui';
</script>

<Text>The quick brown fox jumps over the lazy dog.</Text>

API Reference

Property	Type	Default	Description
`align`	`union`	`"start"`	Text alignment
`as`	`keyof SvelteHTMLElements`	`"div"`	Render element as
`children` Snippet	`Snippet<[void]>`		Text content to render
`color`	`string \| number \| symbol`		Text color
`disabled`	`boolean`	`false`	Disable text
`elementRef` $bindable	`HTMLElement`		Rendered DOM element
`muted`	`boolean`	`false`	Mute text (like disabled without aria-disabled)
`size`	`union`	`"3"`	Font size
`transform`	`union`		Text transform
`truncate`	`boolean`	`false`	Truncate text with ellipsis
`weight`	`union`	`"regular"`	Font weight
`wrap`	`union`		Wrap text mode

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

Weights

Show code

Sample light

Sample regular

Sample medium

Sample bold

Text transformation

Show code

Sample lowercase

Sample uppercase

Sample capitalize

Text alignment

Show code

Sample start

Sample center

Sample end

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.

States

Show code

Sample default

Sample muted

Sample disabled

Tabs

Textarea