How to make Chakra's component inline?

Question

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>

score 30 · Answer 1 · answered May 16 '22 at 05:01

30

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>

answered May 16 '22 at 05:01

Zeaneth

471
4
5

1

This is much cleaner. Thanks. – Kenny Meyer Jul 26 '22 at 19:13

score 4 · Accepted Answer · answered Jun 18 '21 at 20:03

4

You can use Flex for this

<Flex>
<Text> Hello World, </Text>
<Text> place me next to the Text above! </Text>
</Flex>

answered Jun 18 '21 at 20:03

Asit Prakash

341
3
9

1

This is not a precise solution, as it will impact the way the text wraps. – Asen Mitrev Apr 26 '22 at 12:33

Richard Lacey-Evans · Answer 3 · 2023-01-26T18:36:49.850

I found the <Stack> tag useful. You can stack items horizontally as well as vertically:

<Stack direction='row'>
  <Text>Hello World, </Text>
  <Text>place me next to the Text above!</Text>
</Stack>

Alternatively there is a tag called <HStack> that does the same thing:

<HStack>
  <Text>Hello World, </Text>
  <Text>place me next to the Text above!</Text>
</HStack>

This results in: "Hello World, place me next to the Text above!"

How to make Chakra's component inline?

3 Answers3