Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make Chakra's <Text> component inline?

I can't figure our how to make the Chakra component inline. Read the documentation but couldn't figure out the right property or if this is a css class thing.

<Text> Hello World, </Text>
<Text> place me next to the Text above! </Text>
like image 304
uber Avatar asked Dec 06 '25 15:12

uber


2 Answers

ChakraUI documentation on <Text> component explains that it renders a <p> tag by default.

But, you can swap it to work as a <span> tag, by giving <Text> the as prop. Like this:

<Text as="span"> Hello World, </Text>
<Text as="span"> place me next to the Text above! </Text>
like image 62
Zeaneth Avatar answered Dec 10 '25 20:12

Zeaneth


You can use Flex for this

<Flex>
<Text> Hello World, </Text>
<Text> place me next to the Text above! </Text>
</Flex>
like image 31
Asit Prakash Avatar answered Dec 10 '25 21:12

Asit Prakash



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!