Inline

An inline manages the horizontal layout of direct children using flexbox.

Installation

Package installation information
Install	`yarn add @atlaskit/primitives`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/primitives, (opens new window)
Bundle	unpkg.com, (opens new window)

Basic

Use an inline component to configure the layout of a group of elements horizontally.

Use the given props to configure display behavior using design tokens, as shown in the more complex examples below.

import React from 'react';

import { Inline } from '@atlaskit/primitives/compiled/inline';

import ExampleBox from '../shared/example-box';

export default function Example(): React.JSX.Element {
	return (
		<Inline>
			<ExampleBox />
			<ExampleBox />
			<ExampleBox />
		</Inline>
	);
}

Space

Control the spacing between items with the space prop.

import React from 'react';

import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';

import ExampleBox from '../shared/example-box';

export default function Example(): React.JSX.Element {
	return (
		<Stack space="space.500">
			{(['space.100', 'space.200'] as const).map((space) => (
				<Inline key={space} space={space}>
					<ExampleBox />
					<ExampleBox />
					<ExampleBox />
				</Inline>
			))}
		</Stack>
	);
}

When content is set to wrap, the space prop applies equal spacing between rows.

For a different space value between rows use the rowSpace prop.

Toggle space between rows

import React, { useState } from 'react';

import { Label } from '@atlaskit/form/label/default';
import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import Toggle from '@atlaskit/toggle/toggle';

import ExampleBox from '../shared/example-box';

export default function Example(): React.JSX.Element {
	const [rowSpace, setRowSpace] = useState<'space.300' | undefined>(undefined);
	const toggleSpace = () => {
		setRowSpace(rowSpace === 'space.300' ? undefined : 'space.300');
	};

	return (
		<Stack alignInline="start" space="space.500">
			<Inline alignBlock="center">
				<Label htmlFor="toggle-space">Toggle space between rows</Label>
				<Toggle id="toggle-space" onChange={toggleSpace} />
			</Inline>
			<Inline space="space.200" rowSpace={rowSpace} shouldWrap>
				{[...Array(24).keys()].map((index) => (
					<ExampleBox key={index} />
				))}
			</Inline>
		</Stack>
	);
}

Reverse content

flex-direction: row-reverse` is a pattern that has accessibility concerns, (opens new window) so inline doesn't support it.

If reversing content is required, we generally recommend to use JavaScript to reverse the JSX content thereby preserving the tabbing order.

In situations where tabbing order changes based on different breakpoints, then we have show and hide components that enable switching between different orderings of content.

For non-tabbable content that needs to be reversed, flex-direction: row-reverse is supported in via the xcss prop. However, please be aware that we may lint against this in the future.

Alignment

To control the alignment of items you can use the alignBlock and alignInline props which control alignment in the vertical and horizontal axis respectively.

Block alignment

"start" (default)

"center"

"end"

"baseline"

"stretch"

import { type JSX, type ReactNode } from 'react';

import { cssMap, jsx } from '@atlaskit/css';
import { Box } from '@atlaskit/primitives/compiled/box';
import { Flex } from '@atlaskit/primitives/compiled/flex';
import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import { token } from '@atlaskit/tokens';

import ExampleBox from '../shared/example-box';

const styles = cssMap({
	flex: {
		flexDirection: 'column',
		'@media (min-width: 90rem)': {
			flexDirection: 'row',
		},
	},

	visualContainer: {
		display: 'flex',
		borderRadius: token('radius.xsmall'),
		height: '6rem',
	},
});

export default function Example(): JSX.Element {
	return (
		<Flex xcss={styles.flex} justifyContent="space-between">
			<Stack alignInline="center">
				"start" (default)
				<VisualContainer>
					<Inline space="space.050" alignBlock="start">
						<ExampleBox />
						<ExampleBox />
						<ExampleBox padding="space.300" />
					</Inline>
				</VisualContainer>
			</Stack>
			<Stack alignInline="center">
				"center"
				<VisualContainer>
					<Inline space="space.050" alignBlock="center">
						<ExampleBox />
						<ExampleBox />
						<ExampleBox padding="space.300" />
					</Inline>
				</VisualContainer>
			</Stack>
			<Stack alignInline="center">
				"end"
				<VisualContainer>
					<Inline space="space.050" alignBlock="end">
						<ExampleBox />
						<ExampleBox />
						<ExampleBox padding="space.300" />
					</Inline>
				</VisualContainer>
			</Stack>
			<Stack alignInline="center">
				"baseline"
				<VisualContainer>
					<Inline space="space.050" alignBlock="baseline">
						<ExampleBox />
						<ExampleBox />
						<ExampleBox padding="space.300" />
					</Inline>
				</VisualContainer>
			</Stack>
			<Stack alignInline="center">
				"stretch"
				<VisualContainer>
					<Inline space="space.050" alignBlock="stretch">
						<ExampleBox />
						<ExampleBox />
						<ExampleBox padding="space.300" />
					</Inline>
				</VisualContainer>
			</Stack>
		</Flex>
	);
}

const VisualContainer = ({ children }: { children: ReactNode }) => (
	<Box backgroundColor="color.background.neutral" padding="space.050" xcss={styles.visualContainer}>
		{children}
	</Box>
);

Inline alignment

import React, { useCallback, useState } from 'react';

import Button from '@atlaskit/button/default/button';
import Heading from '@atlaskit/heading/heading';
import { Box } from '@atlaskit/primitives/compiled/box';
import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';

import ExampleBox from '../shared/example-box';

const alignmentValues = ['start', 'center', 'end'] as const;

export default function Example(): React.JSX.Element {
	const [alignmentIndex, setAlignmentIndex] = useState<0 | 1 | 2>(0);
	const nextIndex = ((alignmentIndex + 1) % alignmentValues.length) as 0 | 1 | 2;
	const changeAlignment = useCallback(() => {
		setAlignmentIndex(nextIndex);
	}, [nextIndex]);
	return (
		<Stack space="space.300">
			<Heading size="small">Inline alignment</Heading>
			<Box>
				<Button appearance="primary" onClick={changeAlignment}>
					Change alignment to "{alignmentValues[nextIndex]}"
				</Button>
			</Box>
			<Stack space="space.100">
				<Inline space="space.100" alignInline={alignmentValues[alignmentIndex]}>
					<ExampleBox />
					<ExampleBox />
					<ExampleBox />
				</Inline>
			</Stack>
		</Stack>
	);
}

Spread

Elements can be set to stay together, spaced at the given value (default behavior) or spread equally in the space available.

Toggle spread

import React, { useCallback, useState } from 'react';

import { Label } from '@atlaskit/form/label/default';
import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import Toggle from '@atlaskit/toggle/toggle';

import ExampleBox from '../shared/example-box';

export default function Example(): React.JSX.Element {
	const [spread, setSpread] = useState<'space-between' | undefined>(undefined);
	const toggleSpread = useCallback(() => {
		setSpread(spread === 'space-between' ? undefined : 'space-between');
	}, [spread]);

	return (
		<Stack alignInline="start" space="space.500">
			<Inline alignBlock="center">
				<Label htmlFor="inline-toggle-spread">Toggle spread</Label>
				<Toggle id="inline-toggle-spread" onChange={toggleSpread} />
			</Inline>
			<Inline space="space.100" grow="fill" spread={spread}>
				<ExampleBox />
				<ExampleBox />
				<ExampleBox />
			</Inline>
		</Stack>
	);
}

Wrap

When the number of items goes beyond the available space, use shouldWrap to create new rows of content.

import React from 'react';

import { Inline } from '@atlaskit/primitives/compiled/inline';

import ExampleBox from '../shared/example-box';

export default function Example(): React.JSX.Element {
	return (
		<Inline space="space.100" shouldWrap>
			{[...Array(42).keys()].map((i) => (
				<ExampleBox key={i}>{i + 1}</ExampleBox>
			))}
		</Inline>
	);
}

Separator

For logically related elements it's possible to specify a separator character value. Avoid using separator="•" with as="ul" | "ol" | "dl" to maintain correct list semantics.

Common folders

bin|etc|home|tmp|usr

import React from 'react';

import Code from '@atlaskit/code/code';
import Heading from '@atlaskit/heading/heading';
import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';

export default function Example(): React.JSX.Element {
	return (
		<Stack space="space.100">
			<Heading size="xsmall">Common folders</Heading>
			<Inline space="space.100" separator="|">
				{['bin', 'etc', 'home', 'tmp', 'usr'].map((folder) => (
					<Code key="folder">{folder}</Code>
				))}
			</Inline>
		</Stack>
	);
}

Width control

By default an Inline will have its width influenced by the context where it appears. To control the width, use the grow prop with the values:

hug (default) to use space only as required by its children, or
fill to take all space provided by the parent element.

Wrapping Inline is set to grow="hug"

Wrapping Inline is set to grow="fill"

import React from 'react';

import Code from '@atlaskit/code/code';
import { cssMap } from '@atlaskit/css';
import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';

import ExampleBox from '../shared/example-box';

const styles = cssMap({
	growingBox: { display: 'block', flexGrow: 1 },
});

export default function Example(): React.JSX.Element {
	return (
		<Stack alignInline="start" space="space.100">
			<Inline grow="hug">
				<ExampleBox xcss={styles.growingBox}>
					Wrapping <Code>Inline</Code> is set to <Code>grow="hug"</Code>
				</ExampleBox>
			</Inline>
			<Inline grow="fill">
				<ExampleBox xcss={styles.growingBox}>
					Wrapping <Code>Inline</Code> is set to <Code>grow="fill"</Code>
				</ExampleBox>
			</Inline>
		</Stack>
	);
}

Output element

It's possible to control the rendered HTML element with the as prop.

Inline rendering as div:

Option 1Option 2Option 3Option 4

Inline rendering as span:Option 1Option 2Option 3Option 4

Inline rendering as ul:

Jira
Confluence
BitBucket
Trello

Inline rendering as ol:

Jira
Confluence
BitBucket
Trello

Inline rendering as dl:

JSW:: Jira Software.
JSM:: Jira Service Management.
BBC:: BitBucket Cloud.

import { type JSX, type ReactNode } from 'react';

import { Checkbox } from '@atlaskit/checkbox/checkbox';
import Code from '@atlaskit/code/code';
import { cssMap, jsx } from '@atlaskit/css';
import { Box } from '@atlaskit/primitives/compiled/box';
import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import { token } from '@atlaskit/tokens';

const styles = cssMap({
	list: {
		paddingBlockStart: token('space.0'),
		paddingInlineEnd: token('space.0'),
		paddingBlockEnd: token('space.0'),
		paddingInlineStart: token('space.0'),
	},
	definitionList: { paddingInlineStart: token('space.0') },
	definitionListItem: {
		marginBlockStart: token('space.0'),
		marginInlineEnd: token('space.0'),
		marginBlockEnd: token('space.0'),
		marginInlineStart: token('space.0'),
	},
});

const Term = ({ children }: { children: ReactNode }) => (
	<Box as="dt" xcss={styles.definitionListItem}>
		{children}:
	</Box>
);

const Definition = ({ children }: { children: ReactNode }) => (
	<Box as="dd" xcss={styles.definitionListItem}>
		{children}.
	</Box>
);

export default function Example(): JSX.Element {
	return (
		<Stack space="space.200">
			<Box>
				<Code>Inline</Code> rendering as <Code>div</Code>:
				<Inline space="space.200">
					<Checkbox label="Option 1" />
					<Checkbox label="Option 2" />
					<Checkbox label="Option 3" />
					<Checkbox label="Option 4" />
				</Inline>
			</Box>
			<Box>
				<Code>Inline</Code> rendering as <Code>span</Code>:
				<Inline as="span" space="space.200">
					<Checkbox label="Option 1" />
					<Checkbox label="Option 2" />
					<Checkbox label="Option 3" />
					<Checkbox label="Option 4" />
				</Inline>
			</Box>
			<Box>
				<Code>Inline</Code> rendering as <Code>ul</Code>:
				<Inline as="ul" xcss={styles.list} space="space.100">
					<Box as="li">Jira</Box>
					<Box as="li">Confluence</Box>
					<Box as="li">BitBucket</Box>
					<Box as="li">Trello</Box>
				</Inline>
			</Box>
			<Box>
				<Code>Inline</Code> rendering as <Code>ol</Code>:
				<Inline as="ol" xcss={styles.list} space="space.100">
					<Box as="li">Jira</Box>
					<Box as="li">Confluence</Box>
					<Box as="li">BitBucket</Box>
					<Box as="li">Trello</Box>
				</Inline>
			</Box>
			<Box>
				<Code>Inline</Code> rendering as <Code>dl</Code>:
				<Inline as="dl" space="space.100" xcss={styles.definitionList}>
					<Term>JSW</Term>
					<Definition>Jira Software</Definition>
					<Term>JSM</Term>
					<Definition>Jira Service Management</Definition>
					<Term>BBC</Term>
					<Definition>BitBucket Cloud</Definition>
				</Inline>
			</Box>
		</Stack>
	);
}

Practical use case

An example of how an inline component might be used in an app, using Atlassian Design System components.

Create a backlog

import React from 'react';

import IconButton from '@atlaskit/button/icon/button';
import DropdownMenu from '@atlaskit/dropdown-menu/dropdown-menu';
import DropdownItem from '@atlaskit/dropdown-menu/dropdown-menu-item';
import DropdownItemGroup from '@atlaskit/dropdown-menu/dropdown-menu-item-group';
import Heading from '@atlaskit/heading/heading';
import StarStarredIcon from '@atlaskit/icon/core/star-starred';
import StoryObject from '@atlaskit/object/story';
import { Inline } from '@atlaskit/primitives/compiled/inline';

const ActionsMenu = () => (
	<DropdownMenu shouldRenderToParent trigger="Actions">
		<DropdownItemGroup>
			<DropdownItem>Edit</DropdownItem>
			<DropdownItem>Clone work item</DropdownItem>
		</DropdownItemGroup>
	</DropdownMenu>
);

export default function Example(): React.JSX.Element {
	return (
		<Inline alignBlock="center" spread="space-between">
			<Inline space="space.100" alignBlock="center">
				<StoryObject label="Work type: Story" />
				<Heading size="large">Create a backlog</Heading>
			</Inline>
			<Inline alignBlock="center" space="space.050">
				<IconButton icon={StarStarredIcon} appearance="subtle" label="Add as favorite" />
				<ActionsMenu />
			</Inline>
		</Inline>
	);
}

Was this page helpful?

We use this feedback to improve our documentation.