Text

The Text component is a layout primitive that can be used like span to create texts.

It is just a span with some styles.

How to use

1import { Text } from '@devup-ui/react'
2
3function App() {
4  return (
5    <Text color="red" fontSize="24px">
6      This is Text component.
7    </Text>
8  )
9}
1import { Text } from '@devup-ui/react'
2
3function App() {
4  return (
5    <Text color="red" fontSize="24px">
6      This is Text component.
7    </Text>
8  )
9}

The Text component defined above will render like this:

1function App() {
2  return <span className="a b">This is Text component.</span>
3}
1function App() {
2  return <span className="a b">This is Text component.</span>
3}

1.a {
2  color: red;
3}
4.b {
5  font-size: 24px;
6}
1.a {
2  color: red;
3}
4.b {
5  font-size: 24px;
6}

Rendering as Another Element

You can use the as prop to change the element type.

1import { Text } from '@devup-ui/react'
2
3function App() {
4  return (
5    <Text as="p" color="red" fontSize="24px">
6      This is Text component.
7    </Text>
8  )
9}
1import { Text } from '@devup-ui/react'
2
3function App() {
4  return (
5    <Text as="p" color="red" fontSize="24px">
6      This is Text component.
7    </Text>
8  )
9}

The Text component defined above will render like this:

1function App() {
2  return <p className="a b">This is Text component.</p>
3}
1function App() {
2  return <p className="a b">This is Text component.</p>
3}

1.a {
2  color: red;
3}
4.b {
5  font-size: 24px;
6}
1.a {
2  color: red;
3}
4.b {
5  font-size: 24px;
6}