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 , use alignY={input} to mantain vertically alignment with the input field rectangle. This automatically adjusts when descriptions or error messages appear.
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 |
Props
alignX?"left" | "center" | "right" | "between" | "around" | "evenly";
alignY?"center" | "input" | "top" | "bottom";
aria-describedby?string;
aria-details?string;
aria-label?string;
aria-labelledby?string;
aria-live?"off" | "polite" | "assertive";
- 'off': Updates are not announced unless focused.
- 'polite': Updates are announced when the user is idle.
- 'assertive': Updates are announced immediately, interrupting other announcements.
children?ReactNode;
id?string;
noWrap?boolean;
role?"region" | (string & {});
region is used as a role, an aria-label or aria-labelledby must be provided.
See MDN.space?GapSpaceProp;
0Alternative 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.