GitHub icon

The Stack component is built off CSS flex properties. The usage examples here reflect many of these properties.

Vertical Alignment

A stack can be vertically aligned via the alignItems properties via CSS flex. Individual stack items can also be vertically aligned.

Top (Flex Start)

<div className="bg-white">
    <Stack alignItems='flex-start' spacing='4'>
        <Stack.Item><Button small primary>Small Button</Button></Stack.Item>
        <Stack.Item><BodyText size="xsmall">Text</BodyText></Stack.Item>
        <Stack.Item><Avatar name='Rose Tico' size='l' color='red' /></Stack.Item>
        <Stack.Item><Tag onClose={() => {}}>A closable tag</Tag></Stack.Item>
    </Stack>
</div>

Center

Bottom (Flex End)

Horizontal Alignment

A stack can be horizontally aligned via the justifyContent properties via CSS flex.

Left (Flex Start)

Center

Right (Flex End)

Space Between

<div className="bg-white">
	<Stack alignItems='center' justifyContent='space-between' spacing='4'>
		<Stack.Item><Button small primary>Small Button</Button></Stack.Item>
		<Stack.Item><BodyText size="xsmall">Text</BodyText></Stack.Item>
		<Stack.Item><Avatar name='Rose Tico' size='l' color='red' /></Stack.Item>
		<Stack.Item><Tag onClose={() => {}}>A closable tag</Tag></Stack.Item>
	</Stack>
</div>

Space Around

<div className="bg-white">
	<Stack alignItems='center' justifyContent='space-around' spacing='4'>
		<Stack.Item><Button small primary>Small Button</Button></Stack.Item>
		<Stack.Item><BodyText size="xsmall">Text</BodyText></Stack.Item>
		<Stack.Item><Avatar name='Rose Tico' size='l' color='red' /></Stack.Item>
		<Stack.Item><Tag onClose={() => {}}>A closable tag</Tag></Stack.Item>
	</Stack>
</div>

Space Evenly

<div className="bg-white">
	<Stack alignItems='center' justifyContent='space-evenly' spacing='4'>
		<Stack.Item><Button small primary>Small Button</Button></Stack.Item>
		<Stack.Item><BodyText size="xsmall">Text</BodyText></Stack.Item>
		<Stack.Item><Avatar name='Rose Tico' size='l' color='red' /></Stack.Item>
		<Stack.Item><Tag onClose={() => {}}>A closable tag</Tag></Stack.Item>
	</Stack>
</div>

Stack Direction

The direction of a stack can be in a row or column. Items can also be reversed.

Row

<div>
	<style>{`
	.box {
		background: #9013fe;
		color: white;
		padding: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 40px;
		line-height: 2;
		width: 50px;
	}
	.box:nth-of-type(even) { background: #007e7e; }
	`}</style>
	<Stack direction='row'>
		<div className='box'>1</div>
		<div className='box'>2</div>
		<div className='box'>3</div>
		<div className='box'>4</div>
	</Stack>
</div>

Row Reverse

<div>
	<style>{`
	.box {
		background: #9013fe;
		color: white;
		padding: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 40px;
		line-height: 2;
		width: 50px;
	}
	.box:nth-of-type(even) { background: #007e7e; }
	`}</style>
	<Stack direction='row-reverse'>
		<div className='box'>1</div>
		<div className='box'>2</div>
		<div className='box'>3</div>
		<div className='box'>4</div>
	</Stack>
</div>

Column

<div>
	<style>{`
	.box {
		background: #9013fe;
		color: white;
		padding: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 40px;
		line-height: 2;
		width: 50px;
	}
	.box:nth-of-type(even) { background: #007e7e; }
	`}</style>
	<Stack direction='column'>
		<div className='box'>1</div>
		<div className='box'>2</div>
		<div className='box'>3</div>
		<div className='box'>4</div>
	</Stack>
</div>

Column Reverse

<div>
	<style>{`
	.box {
		background: #9013fe;
		color: white;
		padding: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 40px;
		line-height: 2;
		width: 50px;
	}
	.box:nth-of-type(even) { background: #007e7e; }
	`}</style>
	<Stack direction='column-reverse'>
		<div className='box'>1</div>
		<div className='box'>2</div>
		<div className='box'>3</div>
		<div className='box'>4</div>
	</Stack>
</div>

Item Spacing

Stack Items can be evenly spaced out, based on our spacing scale. This is the spacing property in Stack, ranging from 0 to 5.

Horizontal Spacing

When the Stack's direction is row (the default behavior), the spacing property is applied horizontally.

Vertical Spacing

When the Stack's direction is column, the spacing property is applied vertically.

Stack Wrapping

Stack items can utilize flex's wrap functionality to wrap Stack items, prevent wrapping, or wrap reverse items.

Nowrap Stack Items

<div className="bg-white">
	<Stack wrap="nowrap" spacing="2" alignItems="center">
		<Stack.Item><Button small>Small Button</Button></Stack.Item>
		<Stack.Item><BodyText>Text</BodyText></Stack.Item>
		<Stack.Item><Avatar name='Rose Tico' size='l' color='red' /></Stack.Item>
		<Stack.Item><Button large>Big Button</Button></Stack.Item>
		<Stack.Item><BodyText>Text</BodyText></Stack.Item>
		<Stack.Item><Button small primary>Small Button</Button></Stack.Item>
		<Stack.Item><BodyText>Text</BodyText></Stack.Item>
		<Stack.Item><Avatar name='Rose Tico' size='l' color='green' /></Stack.Item>
		<Stack.Item><Button small>Small Button</Button></Stack.Item>
		<Stack.Item><BodyText>Text</BodyText></Stack.Item>
	</Stack>
</div>

Wrapped Stack Items

<div className="bg-white">
	<Stack wrap="wrap" spacing="2" alignItems="center">
		<Stack.Item><Button small>Small Button</Button></Stack.Item>
		<Stack.Item><BodyText>Text</BodyText></Stack.Item>
		<Stack.Item><Avatar name='Rose Tico' size='l' color='red' /></Stack.Item>
		<Stack.Item><Button large>Big Button</Button></Stack.Item>
		<Stack.Item><BodyText>Text</BodyText></Stack.Item>
		<Stack.Item><Button small primary>Small Button</Button></Stack.Item>
		<Stack.Item><BodyText>Text</BodyText></Stack.Item>
		<Stack.Item><Avatar name='Rose Tico' size='l' color='green' /></Stack.Item>
		<Stack.Item><Button small>Small Button</Button></Stack.Item>
		<Stack.Item><BodyText>Text</BodyText></Stack.Item>
	</Stack>
</div>

Reverse Wrapped Stack Items

<div className="bg-white">
	<Stack wrap="wrap-reverse" spacing="2" alignItems="center">
		<Stack.Item><Button small>Small Button</Button></Stack.Item>
		<Stack.Item><BodyText>Text</BodyText></Stack.Item>
		<Stack.Item><Avatar name='Rose Tico' size='l' color='red' /></Stack.Item>
		<Stack.Item><Button large>Big Button</Button></Stack.Item>
		<Stack.Item><BodyText>Text</BodyText></Stack.Item>
		<Stack.Item><Button small primary>Small Button</Button></Stack.Item>
		<Stack.Item><BodyText>Text</BodyText></Stack.Item>
		<Stack.Item><Avatar name='Rose Tico' size='l' color='green' /></Stack.Item>
		<Stack.Item><Button small>Small Button</Button></Stack.Item>
		<Stack.Item><BodyText>Text</BodyText></Stack.Item>
	</Stack>
</div>

Stack Items

Individual items in a stack can be altered. An optional <Stack.Item> can be wrapped around an item, and properties applied to it as needed.

Fill (Grow)

An individual item can be given the fill value (or use grow for more nuanced control) to occupy any free space in a container.

Item Vertical Alignment

<div className="bg-white" style={{ height: '250px' }}>
	<Stack style={{height: '100%'}} justifyContent='space-between'>
		<Stack.Item alignSelf='flex-start'>
			<Button>Top Aligned Item</Button>
		</Stack.Item>
		<Stack.Item alignSelf='flex-end'>
			<Button>Bottom Aligned Item</Button>
		</Stack.Item>
		<Stack.Item alignSelf='center' >
			<Button>Center Aligned Item</Button>
		</Stack.Item>
	</Stack>
</div>

Order

Individual items can be reordered.

<div>
	<style>{`
	.box {
		background: #9013fe;
		color: white;
		padding: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 40px;
		line-height: 2;
	}
	.box:nth-of-type(even) { background: #007e7e; }
	`}</style>
	<Stack>
		<Stack.Item order={3}>
			<div className='box'>1</div>
		</Stack.Item>
		<Stack.Item order={2}>
			<div className='box'>2</div>
		</Stack.Item>
		<Stack.Item order={1}>
			<div className='box'>3</div>
		</Stack.Item>
		<Stack.Item order={5}>
			<div className='box'>4</div>
		</Stack.Item>
		<Stack.Item order={4}>
			<div className='box'>5</div>
		</Stack.Item>
	</Stack>
</div>

Using Stack in other Components

One of the powerful features of Stack is its ability to work with other Anvil components. It can be useful in creating more complex layouts within other UI elements

Card Row Example

<Card thin>
	<Stack alignItems='center' spacing={2}>
		<Checkbox className="m-x-1" />
		<Stack.Item fill><BodyText bold>Default Booking Percentages</BodyText></Stack.Item>
		<TagGroup>
			<Tag>On Site</Tag>
			<Tag>Management</Tag>
		</TagGroup>
		<Stack className="p-l-4" spacing={2}>
			<Button fill='subtle' size='xsmall' iconName="edit" />
			<Button fill='subtle' size='xsmall' iconName="delete" />
		</Stack>
	</Stack>
</Card>

Tabs

<TabGroup verticallyDivided>
	<Tab active>
		<Stack justifyContent="space-around" className="w-100" spacing="5" alignItems="center">
			<Stack.Item fill>
				<Stack alignItems="center" spacing="1">
					<Icon name="person" />
					<BodyText>Jane Doe</BodyText>
				</Stack>
			</Stack.Item>
			<BodyText size="small">01:25</BodyText>
		</Stack>
	</Tab>
	<Tab>
		<Stack justifyContent="space-around" className="w-100" spacing="5" alignItems="center">
			<Stack.Item fill>
				<Stack alignItems="center" spacing="1">
					<Icon name="people" />
					<BodyText>Company Name</BodyText>
				</Stack>
			</Stack.Item>
			<BodyText size="small">06:33</BodyText>
		</Stack>
	</Tab>
	<Tab>
		<Stack justifyContent="space-around" className="w-100" spacing="5" alignItems="center">
			<Stack.Item fill>
				<Stack alignItems="center" spacing="1">
					<Icon name="person" />
					<BodyText>Anna Smith</BodyText>
				</Stack>
			</Stack.Item>
			<BodyText size="small">03:01</BodyText>
		</Stack>
	</Tab>
</TabGroup>

Best Practices

Stack should:

Be used for small-scale layout tasks when you want a row of components that should wrap on small screen widths
Be used to vertically center two elements
Not be used for complex or unique arrangements of components
Not be used for large-scale page layout

Importing

import { Stack } from '@servicetitan/design-system';