Basic
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat odio facilisis mauris sit.
Amet consectetur adipiscing elit duis tristique. Ac turpis egestas maecenas pharetra. Dui nunc mattis enim ut tellus. Egestas congue quisque egestas diam in.
<Text>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat odio facilisis mauris sit.</p>
<p>Amet consectetur adipiscing elit duis tristique. Ac turpis egestas maecenas pharetra. Dui nunc mattis enim ut tellus. Egestas congue quisque egestas diam in.</p>
</Text>
Small
size
to "sm"
.Illo quia quam perferendis ut consectetur rerum dolores dolores. Reiciendis est beatae magnam ut amet quis sequi. Eaque consequatur consectetur non amet nostrum quo animi.
Quod enim vitae et. Impedit ut maxime fugit excepturi harum qui. Praesentium pariatur nisi ut rerum et dolores sed.
<Text size="sm">
<p>
Illo quia quam perferendis ut consectetur rerum dolores dolores.
Reiciendis est beatae magnam ut amet quis sequi. Eaque consequatur
consectetur non amet nostrum quo animi.
</p>
<p>
Quod enim vitae et. Impedit ut maxime fugit excepturi harum
qui. Praesentium pariatur nisi ut rerum et dolores sed.
</p>
</Text>
Medium
size
to "md"
.Illo quia quam perferendis ut consectetur rerum dolores dolores. Reiciendis est beatae magnam ut amet quis sequi. Eaque consequatur consectetur non amet nostrum quo animi.
Quod enim vitae et. Impedit ut maxime fugit excepturi harum qui. Praesentium pariatur nisi ut rerum et dolores sed.
<Text size="md">
<p>
Illo quia quam perferendis ut consectetur rerum dolores dolores.
Reiciendis est beatae magnam ut amet quis sequi. Eaque consequatur
consectetur non amet nostrum quo animi.
</p>
<p>
Quod enim vitae et. Impedit ut maxime fugit excepturi harum
qui. Praesentium pariatur nisi ut rerum et dolores sed.
</p>
</Text>
Large
size
to "lg"
. Note: This comes across kinda strong so you might want to balance it out with a lighter font weight or lighter font color.Illo quia quam perferendis ut consectetur rerum dolores dolores. Reiciendis est beatae magnam ut amet quis sequi. Eaque consequatur consectetur non amet nostrum quo animi.
Quod enim vitae et. Impedit ut maxime fugit excepturi harum qui. Praesentium pariatur nisi ut rerum et dolores sed.
<Text size="lg">
<p>
Illo quia quam perferendis ut consectetur rerum dolores dolores.
Reiciendis est beatae magnam ut amet quis sequi. Eaque consequatur
consectetur non amet nostrum quo animi.
</p>
<p>
Quod enim vitae et. Impedit ut maxime fugit excepturi harum
qui. Praesentium pariatur nisi ut rerum et dolores sed.
</p>
</Text>
One paragraph
<Text>
Illo quia quam perferendis ut consectetur rerum dolores dolores.
Reiciendis est beatae magnam ut amet quis sequi. Eaque consequatur
consectetur non amet nostrum quo animi.
</Text>
One paragraph with element
<p>
or <div>
because Text
has a container of Stack
.Illo quia quam perferendis ut consectetur rerum dolores dolores. Reiciendis est beatae magnam ut amet quis sequi. Eaque consequatur consectetur non amet nostrum quo animi.
<Text>
<p>
Illo quia quam perferendis ut consectetur{" "}
<Link href="https://example.com">rerum dolores</Link>{" "}
dolores. Reiciendis est beatae magnam ut amet quis sequi. Eaque
consequatur consectetur non amet nostrum quo animi.
</p>
</Text>
Props
size
false
'sm' | 'md' | 'lg'
"md"
children
*true
ComponentChild
...rest
false
<Omit<ComponentProps<"div">, "size">
Text
, you could pass anything you normally would pass to <div>
because the return value looks something like this:<div class={classValue} {...restWithoutClass}>
{children}
</div>