Text

import { Text } from 'yarcl';

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.

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