Text represent a single text line without semantic meaning.
|install||yarn add @clayui/core|
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
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.
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
span tag providing a block element or a inline one.
<Text as="p"> Text using paragraph </Text> <Text as="span"> Text using span </Text>
Likewise, Text provides a new property that allows you change the font weight of text in
If you want to shortening Text content because it doesn't fit the layout correctly, you can use
Text provides a property which sets a font whose letters and characters each occupy the same amount of horizontal space, which is
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.
As well as Heading, Text provides its own font weight styles from
lighter just indicating it in the property
weight. The default font weight is
<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.