> For the complete documentation index, see [llms.txt](https://valence.isaacshea.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://valence.isaacshea.com/valence-core/components/display/text.md).

# 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](/valence-core/components/buttons/text-button.md), [Alert](/valence-core/components/display/alert.md), [Pill](/valence-core/components/display/pill.md), etc.

## Usage

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

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

### Font family

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

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

{% hint style="info" %}
The font family will need to be correctly installed before use. [See more](/valence-core/fundamentals/using-custom-fonts.md).
{% endhint %}

### Styles

```tsx
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>
    )
}
```

{% hint style="info" %}
**After more specificity?** The `weight` prop allows any CSS `font-weight` attribute, and the `fontSize` prop allows any `font-size` attribute.
{% endhint %}

***

## 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`.

<table data-full-width="true"><thead><tr><th width="158">Property</th><th width="337.54062038404726">Type</th><th>Description</th></tr></thead><tbody><tr><td>family</td><td><code>CSSProperties["fontFamily"]</code></td><td>Sets <code>font-family</code> css property.</td></tr><tr><td>weight</td><td><code>CSSProperties["fontWeight"]</code></td><td>Sets <code>font-weight</code> css property.</td></tr><tr><td>fontSize</td><td><code>CSSProperties["fontSize"]</code></td><td>Sets <code>font-size</code> css property.</td></tr><tr><td>align</td><td><code>CSSProperties["textAlign"]</code></td><td>Sets <code>text-align</code> css property.</td></tr><tr><td>transform</td><td><code>CSSProperties["textTransform"]</code></td><td>Sets <code>text-transform</code> css property.</td></tr><tr><td>size</td><td><code>ComponentSize</code></td><td>Sets the size of the text.</td></tr><tr><td>color</td><td><code>CSSProperties["color"]</code></td><td>Sets <code>color</code> css property.</td></tr><tr><td>italic</td><td><code>boolean</code></td><td>Shorthand for <code>font-style: italic</code>.</td></tr><tr><td>bold</td><td><code>boolean</code></td><td>Shorthand for <code>font-weight: 800</code>.</td></tr><tr><td>monospace</td><td><code>boolean</code></td><td>Shorthand for <code>font-family: monospace</code>.</td></tr><tr><td>highlightColor</td><td><code>CSSProperties["color"]</code></td><td>Sets the color of highlighted sections.</td></tr><tr><td>highlightStyle</td><td><code>CSSProperties</code></td><td>Optional styles to pass to highlighted sections.</td></tr></tbody></table>

***

## Changelog

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