@atlaskit/primitives/constellation/inline/usage.mdx

Primitives are token-backed low-level building blocks.

---
title: Inline
description: An inline manages the horizontal layout of direct children using flexbox.
order: 2
---

Use the inline component in conjunction with other layout components such as
[box](/components/primitives/box/usage) and [stack](/components/primitives/stack/usage) to easily
create customized layouts, with built-in guidance from the Atlassian Design System.

Inline components act as container to decide the horizontal layout of its children. They decide the
specifics of how the children are displayed, for example, where they are aligned or how much space
is between child elements. An inline component should be used purely for visual alignment, and
should have no opinions about the functionality of its children.

In its simplest form, an inline component 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>
```

Inline also has a `flex-direction: row;`. This is the default for flexbox, so it is not explicitly
applied.

## Using inline

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

Use the inline props to customize the spacing and styling on any child elements. These include:

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

## Accessibility

If you need to hide the markers of an inline list, don't use the `list-style-type: none` CSS
property, as this strips the list out of its semantics in Safari, causing VoiceOver users not to get
it announced as such.

There are a few options to get around this. Using CSS, you can target the `::marker` pseudoclass of
the list items and set the font size to zero to get the same visual results while preserving the
semantics across browsers and assistive technologies.

```tsx
<Box as="li" xcss={xcss({ '::marker': { fontSize: 0 } })}>
	Example
</Box>
```

Alternatively, if you do need to use `list-style-type: none` you can add add `role="list"` to the
`Inline` element.

## Related

- [Use box for a generic container with access to design tokens](/components/primitives/box/usage)
- [Manage vertical layout using a stack component](/components/primitives/stack/usage)
- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)