Docs Components
Typography
Text

Text

The Text component is used to display text.

Import

import { Text } from "valliumui";

Usage


Vallium looks good!

<Text>Vallium looks good!</Text>

Text type

The text component uses different HTML elements to display the text. Each type has a different size for usage in different use cases. The Text component will use the p element type as the default.

Use the type property to decide which element type the text will be. Valid value are h1, h2, h3, h4, h5, h6, p.


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

<Card gap="4">
    <Text type="h1">Heading 1</Text>
    <Text type="h2">Heading 2</Text>
    <Text type="h3">Heading 3</Text>
    <Text type="h4">Heading 4</Text>
    <Text type="h5">Heading 5</Text>
    <Text type="h6">Heading 6</Text>
    <Text type="p">Paragraph</Text>
</Card>

Text color

Use the color property to change the color of the text. Valid values are all TailwindCSS color classes.


I am a red text now!

<Text color="text-red-500">I am red now!</Text>

Text underline

Use the underline property to display a underline under the text.


Look at my underline!

<Text underline>Look at my underline!</Text>

Text weight

Use the weight property to change the weight (thickness) of the text. Valid value are bold, normal, light, medium, semibold.


I am a light text!

I am a normal text!

I am a medium text!

I am a semibold text!

I am a bold text!

I am a light h1!

I am a normal h1!

I am a medium h1!

I am a semibold h1!

I am a bold h1!

<Card row items="center" gap="4">
    <Stack gap="2">
        <Text weight="light">I am a light text!</Text>
        <Text weight="normal">I am a normal text!</Text>
        <Text weight="medium">I am a medium text!</Text>
        <Text weight="semibold">I am a semibold text!</Text>
        <Text weight="bold">I am a bold text!</Text>
    </Stack>
    <Stack gap="2">
        <Text type="h1" weight="light">I am a light h1!</Text>
        <Text type="h1" weight="normal">I am a normal h1!</Text>
        <Text type="h1" weight="medium">I am a medium h1!</Text>
        <Text type="h1" weight="semibold">I am a semibold h1!</Text>
        <Text type="h1" weight="bold">I am a bold h1!</Text>
    </Stack>
</Card>
BadgeButton