---
title: Inline
description: An Inline is a primitive component that is responsible for the horizontal layout of its child elements.
order: 2
---

Primitive components are designed to act as building blocks for composing a user experience. An Inline primitive should be used when you want to layout UI elements horizontally, and make use of the built-in design guidance from the Atlassian Design System. 

Inline primitives work as you might expect, aligning content horizontally across a page or layout, as a container that decides the horizontal layout of its children. Inline components also decide the specifics of how the children are displayed, for example, where they are aligned or how much space is between child elements. Inline should be used purely for visual alignment, and should have no opinions about the functionality of its children.  

In its simplest form, `Inline` operates like a flexbox row, however adds the built in design token support and guidance.

```jsx
<Inline space="space.100" alignInline="center" alignBlock="start">
  ...
</Inline>
```
It also has a flex-direction: row; but that’s the default, so not explicitly applied.

## Use `Inline`
The purpose of an Inline is primarily as a container element controlling how child components are displayed and positioned horizontally. Inline should be used any time you wish to layout elements or components horizontally. 

The various Inline props can then be used to customize the spacing and styling on any child elements. These include:

- `alignBlock`
- `alignInline`
- `shouldWrap`
- `spread`
- `grow`
- `space`
- `rowSpace`
- `separator`

## Related
- [Learn more about the Box primitive](/components/primitives/box/usage)
- [Learn more about the Stack primitive](/components/primitives/stack/usage)
