# Text

A primitive component that can be used to create all kinds of text styles.

Tabs: [Guidelines](/components/web/text/text.guidelines.md) · [Code](/components/web/text/text.code.md)

## Features

- Can render as any HTML element or component.

- Applicable for both paragraphs, headings and label.

- Doesn't add spacing around itself.

## Examples

### Headings

For headings, and to group information, we use the `heading-s` – `heading-5xl` variants. Pair them with a semantic heading tag (`h1`–`h6`).

```tsx
<Stack space={10}>
    <Text variant="heading-l" as="h2">
        Keeping your data secure is our priority
    </Text>
    <Text as="p">
        We only use the receipt that matches your expense. And we never store your emails on our
        servers. Don't just take our word for it – we've even been audited to ensure this.
    </Text>
</Stack>
```

### Paragraphs

We use the `body-s` – `body-l` variants for regular copy (`body-s` is the default). When doing so, we usually render a `p` tag.

```tsx
<Text variant="body-s" as="p">
    Issue Pleo’s smart company cards with individual spending limits. Your team can buy what they
    need, while we sort the paperwork automatically.
</Text>
```

### Labels and subtitles

Use the `label-*` variants (`label-s` – `label-l`) for labels within forms and input fields. They can also be used as subtitles in groups of information.

```tsx
<Stack space={6}>
    <CurrencyInput value={999.99} label="Transfer amount" />
    <Text variant="label-s" as="p">
        Your transfer limit is 12,345.67 USD
    </Text>
</Stack>
```

### Skeleton

Use a "skeleton" version of this component to display a loading state while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

```tsx
<Text skeleton variant="body-s">
    Issue Pleo’s smart company cards with individual spending limits. Your team can buy what they
    need, while we sort the paperwork automatically.
</Text>
```

## Related components

- [List](/components/web/list/list.guidelines): A set of text objects in a bulleted or numbered format.