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.
Keep your team's projects, shared documents, and decisions in one place.
Code
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
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.
Project visibility: Private
Code
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 switch to the prose style.
Long-form content such as documentation uses the prose style. Read the onboarding guide before your first project.
Code
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.