Text
Text represent a single text line without semantic meaning.
| install | yarn add @clayui/core |
|---|---|
| version | 3.120.0 |
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.
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.
Truncate
If you want to shortening Text content because it doesn't fit the layout correctly, you can use truncate property.
Monospace
Text provides a property which sets a font whose letters and characters each occupy the same amount of horizontal space, which is monospace.
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.
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.
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.