Horizontal and vertical stacks

Tip

View source on GitHub →

Simple one-dimensional layouts made easy.

<HStack>
	<Button icon={experiment} />
	<Button icon={magicAlt} />
	<Button icon={wrench} />
	<Button icon={bot} />
</HStack>

<VStack>
	<Button icon={experiment} />
	<Button icon={magicAlt} />
	<Button icon={wrench} />
	<Button icon={bot} />
</VStack>

<HStack>
	<Button icon={experiment} />
	<Button icon={magicAlt} />
	<VStack>
		<Button icon={num1Circle} />
		<Button icon={num2Circle} />
		<Button icon={num3Circle} />
		<Button icon={num4Circle} />
	</VStack>
	<Button icon={wrench} />
	<Button icon={bot} />
</HStack>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Disable wrapping

<HStack
	noWrap
>
	{...}
</HStack>