Text

Beta

Text represent a single text line without semantic meaning.

install	yarn add @clayui/core
version
use	`import {Text} from '@clayui/core';`

Table of Contents

Introduction
Size
As API
Font Styles
Italic
Truncate
Monospace
Color
Font Weights
Text Highlight
API Reference

Introduction

Text is a component that represents a single text line without semantic meaning like a Button. Text can also provide its styles using its props like italic, truncate, monospace, color, weight and size.

Size

The same way as Heading, Text provides its own font size level from 1 to 11 just indicating it in the property size. The default font size is 4.

Open Sandbox

import {Text} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<div className="p-4">
			<div>
				<Text size={11}>Text Size Level 11</Text>
			</div>
			<div>
				<Text size={10}>Text Size Level 10</Text>
			</div>
			<div>
				<Text size={9}>Text Size Level 9</Text>
			</div>
			<div>
				<Text size={8}>Text Size Level 8</Text>
			</div>
			<div>
				<Text size={7}>Text Size Level 7</Text>
			</div>
			<div>
				<Text size={6}>Text Size Level 6</Text>
			</div>
			<div>
				<Text size={5}>Text Size Level 5</Text>
			</div>
			<div>
				<Text size={4}>Text Size Level 4</Text>
			</div>
			<div>
				<Text size={3}>Text Size Level 3</Text>
			</div>
			<div>
				<Text size={2}>Text Size Level 2</Text>
			</div>
			<div>
				<Text size={1}>Text Size Level 1</Text>
			</div>
		</div>
	);
}

As API

The HTML tag of this component can be chosen to ensure that the semantics of the text are representative. Text provides a property that allows to display the component depending on the user election. It can be displayed as p or span tag providing a block element or a inline one.

<Text as="p">Text using paragraph</Text>

<Text as="span">Text using span</Text>

Font Styles

Italic

Likewise, Text provides a new property that allows you change the font weight of text in italic form.

Open Sandbox

import {Text} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<div className="p-4">
			<Text italic>
				Single origin, extra id beans, eu to go, skinny americano ut
				aftertas te sugar. At americano, viennese variety iced grounds,
				grinder froth and pumpkin spice aromatic. Cultivar aged lungo,
				grounds café au lait, skinny, blue mountain, in variety sugar
				shop roast. Wings, blue mountain affogato organic cappuccino
				java plunger pot. Single shot variety pumpkin spice seasonal
				skinny barista carajillo robust cream.
			</Text>
		</div>
	);
}

Truncate

If you want to shortening Text content because it doesn’t fit the layout correctly, you can use truncate property.

Open Sandbox

import {Text} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<div className="p-4">
			<Text truncate>
				Single origin, extra id beans, eu to go, skinny americano ut
				aftertas te sugar. At americano, viennese variety iced grounds,
				grinder froth and pumpkin spice aromatic. Cultivar aged lungo,
				grounds café au lait, skinny, blue mountain, in variety sugar
				shop roast. Wings, blue mountain affogato organic cappuccino
				java plunger pot. Single shot variety pumpkin spice seasonal
				skinny barista carajillo robust cream.
			</Text>
		</div>
	);
}

Monospace

Text provides a property which sets a font whose letters and characters each occupy the same amount of horizontal space, which is monospace.

Open Sandbox

import {Text} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<div className="p-4">
			<Text monospace>
				Single origin, extra id beans, eu to go, skinny americano ut
				aftertas te sugar. At americano, viennese variety iced grounds,
				grinder froth and pumpkin spice aromatic. Cultivar aged lungo,
				grounds café au lait, skinny, blue mountain, in variety sugar
				shop roast. Wings, blue mountain affogato organic cappuccino
				java plunger pot. Single shot variety pumpkin spice seasonal
				skinny barista carajillo robust cream.
			</Text>
		</div>
	);
}

Color

Text has the ability to apply different color fonts giving emphasis to the text, you can check here. Notice that is not recommended on light backgrounds due to contrast issues around light text.

Open Sandbox

import {Text} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<div className="p-4">
			<Text as="p" color="primary">
				primary
			</Text>
			<Text as="p" color="secondary">
				secondary
			</Text>
			<Text as="p" color="muted">
				muted
			</Text>
			<Text as="p" color="success">
				success
			</Text>
			<Text as="p" color="warning">
				warning
			</Text>
			<Text as="p" color="danger">
				danger
			</Text>
			<Text as="p" color="info">
				info
			</Text>
		</div>
	);
}

Font Weights

As well as Heading, Text provides its own font weight styles from bolder to lighter just indicating it in the property weight. The default font weight is normal.

Open Sandbox

import {Text} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<div className="p-4">
			<Text as="p" weight="lighter">
				Text with ligther weight
			</Text>
			<Text as="p" weight="light">
				Text with light weight
			</Text>
			<Text as="p" weight="normal">
				Text with normal weight
			</Text>
			<Text as="p" weight="semi-bold">
				Text with semi-bold weight
			</Text>
			<Text as="p" weight="bold">
				Text with bold weight
			</Text>
			<Text as="p" weight="bolder">
				Text with bolder weight
			</Text>
		</div>
	);
}

Text Highlight

The <TextHighlight /> component adds a highlight to the text characters that match the value that can be entered by the user, for example can be used in an Autocomplete component.

Open Sandbox

import {Text} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<div className="p-4">
			<TextHighlight match="Ri s">Rick Sanchez</TextHighlight>
		</div>
	);
}

API Reference

Text

{ ({ "aria-hidden": ariaHidden, as, children, color, id, italic, monospace, size, truncate, weight, }: Props): JSX.Element; displayName: string; }

Parameters

Properties

aria-hidden

boolean | undefined

State indicates whether the component will be exposed to an accessibility API.

as

"p" | "span" | undefined= "span"

Determine the way in which a text is displayed.

children

React.ReactNode

Text content.

color

ColorType | undefined

Determine the color text.

id

string | undefined

The id global attribute defines an identifier (ID) which must be unique in the whole document.

italic

boolean | undefined

Set the text in italic style.

monospace

boolean | undefined

Set the text in monospace style.

size

TextSize | undefined= 4

Number to set the text size.

truncate

boolean | undefined

Set the text in truncate style.

weight

WeightFont | undefined

Determines the weight of the font.

Returns

Element

Edit this page on GitHub

Contributors

Matuzalém Teles, Sergio Jimenez del Coso

Last edited May 11, 2025 at 5:57:01 PM

Table of Contents

Introduction
Size
As API
Font Styles
Italic
Truncate
Monospace
Color
Font Weights
Text Highlight
API Reference