Stack

import { Button } from "@hel/ui/button"
import { Heading } from "@hel/ui/heading"
import { Stack } from "@hel/ui/stack"

When to use it#

Stack is what you reach for when things go one under the other: a heading and its text, the fields of a form, the sections of a page. You set the gap once and every child gets it, so you don't add margins to individual items.

It is a Flex with the direction fixed to a column, and it takes the same props. If you need a row, use Flex. For tiles in rows and columns, use Grid.

Import#

Copyimport { Stack } from "@hel/ui/stack"

Examples#

Spacing that follows the content#

Nest stacks so the gap shows how things belong together. A tight gap holds a title and its description as one unit, and a wider gap between the units tells the eye where one ends and the next begins. A stack inside a stack is the usual way to get this, with no spacing classes needed.

import { Badge } from "@hel/ui/badge"
import { Flex } from "@hel/ui/flex"
import { Heading } from "@hel/ui/heading"

Alignment#

A column stretches its children to the full width by default, so a button inside a stack fills the row. Set align="start" to let children keep their natural width, as the example at the top does. center and end work the same way, and justify spreads children down the column when the stack has a set height.

Props#

Stack takes the same props as Flex apart from direction.