Horizontal and vertical stacks

Simple one-dimensional layouts made easy.

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

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

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

Highlighted props

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

Disable wrapping

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