Text

import { Text } from '@yarcl/react';

Subheading style

Body text is the default text style.

Muted text for secondary information.

primaryneutralsuccesswarningdangerinfo

Caption styleconst code = 'monospace';

<Text textStyle="subheading">Subheading style</Text>
<Text as="p" muted>Muted text for secondary information.</Text>
<Text color="danger">danger</Text>

textStyle accepts the keys of your text styles. It defaults to defaults.textStyle.

Inside a Table, Text without an explicit textStyle follows the table’s density font size when no Text component default overrides its style. This lets muted and truncate match plain cell text. An explicit textStyle keeps its configured size.

Use inherit to follow the surrounding font in any container, including a table with a Text component default. An explicit textStyle takes precedence over inherit.

<Table.Cell><Text muted>None</Text></Table.Cell>
<Text inherit muted>Uses the surrounding font</Text>

Line breaks and long words

Use whiteSpace="pre-wrap" to preserve line breaks and spaces in plain text, such as a written submission. pre-line preserves line breaks while collapsing repeated spaces. Add wrap="anywhere" so long URLs and unbroken words stay inside the container.

<Text as="p" whiteSpace="pre-wrap" wrap="anywhere">{submission}</Text>

Truncation

One line that is far too long for this narrow box and ends with an ellipsis.Two lines of text that keep going well past the second line, so everything after it is clamped away with an ellipsis at the end.

<Text truncate>One line…</Text>
<Text truncate={2}>Two lines…</Text>

Props

Prop	Type	Default	Description
as	TextElement	'span'	Element to render.
color	Colorconfig		Semantic color, from the colors config. Inherits the surrounding color when omitted.
inherit	boolean		Inherits the surrounding font instead of applying the component's default text style. An explicit textStyle takes precedence.
muted	boolean		Uses the muted neutral color, for secondary text.
textStyle	TextStyleconfig	config.defaults.textStyle	Text style, from the typography.styles config.
truncate	number | boolean		Truncates with an ellipsis: true for one line, a number for that many lines.
whiteSpace	'normal' | 'pre-line' | 'pre-wrap'		How whitespace and line breaks are displayed. pre-wrap preserves newlines and spaces.
wrap	'normal' | 'anywhere'		Allows long unbroken words to wrap at any character.