Inline

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.

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.

For horizontally alignment you can use the alignX prop.

Form Input Alignment

When aligning form inputs with buttons or elements, use alignY="center" to mantain vertically alignment with the input field rectangle. This automatically adjusts when descriptions or error messages appear.

Props

"left" | "center" | "right";

"center" | "top" | "bottom";

string;

string;

string;

string;

"off" | "polite" | "assertive";

ReactNode;

string;

"region" | (string & {});

GapSpaceProp;

0

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.

Related