# Text

Body text. Renders a paragraph by default.

Text uses `semantic.typography.primary`, the UI style by default and the prose style inside long-form content (`data-text-context="prose"`). Paragraphs stop at `semantic.dimension.size.maxWidth.text` (52rem) so lines stay readable in wide layouts; inline text has no limit.

```tsx
// demo.tsx
import {Text} from '@earendil-works/elanor-react';

export default function TextDemo() {
  return <Text>Keep your team's projects, shared documents, and decisions in one place.</Text>;
}
```

## Usage

```tsx
import {Text} from '@earendil-works/elanor-react';

<Text>Keep your team's projects in one place.</Text>;
```

## Inline

Use `render={<span />}` inside other text. Put element-specific attributes and refs on the rendered element.

```tsx
// inline.tsx
import {Text} from '@earendil-works/elanor-react';

export default function TextInline() {
  return (
    <p>
      Project visibility: <Text render={<span />}>Private</Text>
    </p>
  );
}
```

## Long-form content

Inside an element with `data-text-context="prose"`, Text and [Link](/components/link.md) switch to the prose style.

```tsx
// prose.tsx
import {Link, Text} from '@earendil-works/elanor-react';

export default function TextProse() {
  return (
    <div data-text-context="prose">
      <Text>
        Long-form content such as documentation uses the prose style. Read the{' '}
        <Link href="#">onboarding guide</Link> before your first project.
      </Text>
    </div>
  );
}
```

## API

### `Text`

Renders `<p>`. Accepts its HTML attributes, `ref`, and `render`.