Text

Last updated: 2.2.0 (03/02/2024)

The Text component is a markdown-compatible paragraph wrapper that is particularly handy when dealing with formatting for internationalization.

This component forms the back-bone of all components that render text, including the Button, Alert, Pill, etc.

Usage

import { Text } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Text>
            I'm a **markdown-compatible** text component!
        </Text>
    )
}

Font family

import { Text } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Text
            family="Plus Jakarta Sans"
        >
            I'm a **markdown-compatible** text component!
        </Text>
    )
}

The font family will need to be correctly installed before use. See more.

Styles

import { Text } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Text
            bold
            italic
            monospace
            size="md"
            transform="uppercase"
            align="right"
        >
            I'm a **markdown-compatible** text component!
        </Text>
    )
}

After more specificity? The weight prop allows any CSS font-weight attribute, and the fontSize prop allows any font-size attribute.

---

Supported markdown attributes

• - line break/newline

• ***{...}*** - bold & italicized text

• **{...}** - bold text

• *{...}* - italicized text

• `{...}` - monospace text

• <hl>{...}</hl> - highlighted text

---

Props

Extends GenericProps, GenericClickableProps and PolymorphicTextProps.

Property	Type	Description
family	CSSProperties["fontFamily"]	Sets font-family css property.
weight	CSSProperties["fontWeight"]	Sets font-weight css property.
fontSize	CSSProperties["fontSize"]	Sets font-size css property.
align	CSSProperties["textAlign"]	Sets text-align css property.
transform	CSSProperties["textTransform"]	Sets text-transform css property.
size	ComponentSize	Sets the size of the text.
color	CSSProperties["color"]	Sets color css property.
italic	boolean	Shorthand for font-style: italic.
bold	boolean	Shorthand for font-weight: 800.
monospace	boolean	Shorthand for font-family: monospace.
highlightColor	CSSProperties["color"]	Sets the color of highlighted sections.
highlightStyle	CSSProperties	Optional styles to pass to highlighted sections.

---

Changelog

• 2.2.0: Added the <hl> syntax, and the highlightColor and highlightStyle props.