Inline
Display children horizontally in a row.
The <Inline> component is a responsive layout component based on CSS Flexbox. It aligns its content horizontally in a row and automatically wraps to a new line when there isn't enough space on the screen.
Use the inline component in combination with other layout components to easily create customized layouts.
Usage
If you have more than two elements you can use the <Inline> component to arrange elements horizontally according to the space required.
For adding the space between the elements you need to use the space property and set it to a supported space value.
import { Inline } from '@marigold/components';import { Rectangle } from '@/ui/Rectangle';export default () => ( <Inline space={8}> <Rectangle height="100px" width="100px" /> <Rectangle height="100px" width="100px" /> <Rectangle height="100px" width="100px" /> <Rectangle height="100px" width="100px" /> </Inline>);Together with a <Split> you can use the <Inline> to create as much space as given between two elements while staying in the inline layout.
Different alignment
The child elements can be positioned differently on their x and y axis.
Items of various height can be vertically aligned using the alignY prop. In the following example you can see it.
import { Center, Inline, Stack } from '@marigold/components';import { Divider } from '@marigold/components';import { Rectangle } from '@/ui/Rectangle';export default () => ( <Center> <Stack space={8}> <Inline space={3} alignY="top"> <Rectangle height="40px" width="40px" /> <Rectangle height="60px" width="60px"> <div className="text-text-primary-muted m-auto">Top</div> </Rectangle> <Rectangle height="40px" width="40px" /> </Inline> <Divider /> <Inline space={3} alignY="center"> <Rectangle height="40px" width="40px" /> <Rectangle height="60px" width="60px"> <div className="text-text-primary-muted m-auto">Center</div> </Rectangle> <Rectangle height="40px" width="40px" /> </Inline> <Divider /> <Inline space={3} alignY="bottom"> <Rectangle height="40px" width="40px" /> <Rectangle height="60px" width="60px"> <div className="text-text-primary-muted m-auto">Bottom</div> </Rectangle> <Rectangle height="40px" width="40px" /> </Inline> </Stack> </Center>);For horizontally alignment you can use the alignX prop.
import { Divider, Inline, Stack } from '@marigold/components';import { Rectangle } from '@/ui/Rectangle';export default () => ( <Stack space={8}> <Inline space={3} alignX="left"> <Rectangle height="60px" width="80px" /> <Rectangle height="60px" width="80px"> <div className="text-text-primary-muted m-auto">Left</div> </Rectangle> <Rectangle height="60px" width="80px" /> </Inline> <Divider /> <Inline space={3} alignX="center"> <Rectangle height="60px" width="80px" /> <Rectangle height="60px" width="80px"> <div className="text-text-primary-muted m-auto">Center</div> </Rectangle> <Rectangle height="60px" width="80px" /> </Inline> <Divider /> <Inline space={3} alignX="right"> <Rectangle height="60px" width="80px" /> <Rectangle height="60px" width="80px"> <div className="text-text-primary-muted m-auto">Right</div> </Rectangle> <Rectangle height="60px" width="80px" /> </Inline> <Divider /> <Inline space={3} alignX="between"> <Rectangle height="60px" width="80px" /> <Rectangle height="60px" width="80px"> <div className="text-text-primary-muted m-auto">Between</div> </Rectangle> <Rectangle height="60px" width="80px" /> </Inline> <Divider /> <Inline space={3} alignX="around"> <Rectangle height="60px" width="80px" /> <Rectangle height="60px" width="80px"> <div className="text-text-primary-muted m-auto">Around</div> </Rectangle> <Rectangle height="60px" width="80px" /> </Inline> <Divider /> <Inline space={3} alignX="evenly"> <Rectangle height="60px" width="80px" /> <Rectangle height="60px" width="80px"> <div className="text-text-primary-muted m-auto">Evenly</div> </Rectangle> <Rectangle height="60px" width="80px" /> </Inline> </Stack>);Form input alignment
When aligning form inputs with buttons , use alignY={input} to maintain vertical alignment with the input field rectangle. This automatically adjusts when descriptions or error messages appear.
import { useState } from 'react';import { Button, Inline, Stack, Switch, TextField } from '@marigold/components';export default function () { const [description, setDescription] = useState(''); const toggleDescription = () => { if (description) { setDescription(''); } else { setDescription('button is vertically algined with input'); } }; return ( <Stack space={6}> <Switch label="toggle description" onChange={toggleDescription} /> <Inline alignY="input" space={6}> <div className="flex-1"> <TextField label="My label is great." description={description} /> </div> <Button onClick={toggleDescription}>Submit</Button> </Inline> </Stack> );}Prevent line breaks
By default, inline elements will wrap to the next line when there isn't enough horizontal space. In some use cases, such as when using <Inline> inside a table cell, this automatic wrapping can be problematic because tables force content to break or wrap to fit within their columns. To prevent unwanted line breaks and keep all items on a single line, use the noWrap prop.
Venue | Address | Traits | Capacity | Rating |
|---|---|---|---|---|
#1 Main Street Park Amphitheater | 123 Main Street Laughville | 500 | outdoor lush cozy | 4.7 |
#2 Shakytown Comedy Club | 456 Comedy Boulevard Shakytown | 300 | quirky urban | 3.6 |
#3 Oak Ridge Barn | 789 Oak Road Hee-Haw City | 150 | cozy cheap | 2.3 |
#4 Harborfront Promenade | 101 Riverside Drive Port Funsies | 600 | quirky vibey | 4.2 |
#5 Cellar Lounge | 202 Buzzington Street Laughville | 250 | hype cheap | 3.1 |
import { venues } from '@/lib/data/venues';import { Badge, Inline, Stack, Table, Text } from '@marigold/components';export default () => ( <Table> <Table.Header> <Table.Column rowHeader>Venue</Table.Column> <Table.Column>Address</Table.Column> <Table.Column>Traits</Table.Column> <Table.Column>Capacity</Table.Column> <Table.Column alignX="right">Rating</Table.Column> </Table.Header> <Table.Body> {venues.slice(0, 5).map(item => ( <Table.Row key={item.id}> <Table.Cell> <Inline space={1} noWrap> <Text variant="muted">#{item.id}</Text> <Text weight="medium" wrap="noWrap"> {item.name} </Text> </Inline> </Table.Cell> <Table.Cell> <Stack> <Text wrap="noWrap">{item.street}</Text> <Text wrap="noWrap">{item.city}</Text> </Stack> </Table.Cell> <Table.Cell>{item.capacity}</Table.Cell> <Table.Cell> <Inline space={1}> {item.traits.map(trait => ( <Badge key={trait}>{trait}</Badge> ))} </Inline> </Table.Cell> <Table.Cell>{item.rating}</Table.Cell> </Table.Row> ))} </Table.Body> </Table>);Props
Inline
Prop
Type
Alternative components
Columns: Because of the flex layout the
<Inline>will wrap its content when there is no more space given to display it in smaller screen sizes, if you still want to have the items in one row, please use our columns component with the fixed column to get this layout.Stack: If you need to display content vertically you should use our stack component.