Inline
An inline manages the horizontal layout of direct children using flexbox.Use the inline component in conjunction with other layout components such as box and stack 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.
<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:
alignBlockalignInlineshouldWrapspreadgrowspacerowSpaceseparator
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.
const recommendedStyles = cssMap({
list: {
'&::marker': {
fontSize: '0',
},
},
});
export default function Example() {
return (
<Inline as="ul">
<li css={recommendedStyles.list}>Item 1</li>
<li css={recommendedStyles.list}>Item 2</li>
<li css={recommendedStyles.list}>Item 3</li>
</Inline>
);
}Alternatively, if you do need to use list-style-type: none you can add add role="list" to the
Inline element.