Quarterly report
Last edited 2 hours ago
import { Button } from "@hel/ui/button"
import { Flex } from "@hel/ui/flex"
import { Heading } from "@hel/ui/heading"When to use it#
Flex is the general purpose layout component. Use it whenever a few things sit side by side, or one under another, and you want control over how they line up: a title with actions on the far end, a row of icons, a form footer.
If the direction is always a column, Stack is the shorter way to write it. For tiles that should form rows and columns together, use Grid.
Import#
import { Flex } from "@hel/ui/flex"How the props map#
Flex is a plain flexbox, and each prop is one flexbox setting with the spacing scale applied.
| Prop | What it controls | Values |
|---|---|---|
direction | Which way the children run | "row" (default), "column" |
gap | The space between children | none to 4xl |
align | How children line up across the direction | start, center, end, stretch (default), baseline |
justify | How children spread along the direction | start (default), center, end, between, around |
wrap | Whether children move onto a new line when out of room | false (default) |
padding | Space inside, on both axes | none to 4xl |
Gap and padding use the same scale as the rest of the library, so the sizes match the spacing inside buttons and cards. The scale runs none, px (1px, padding only), 3xs (2px), 2xs (4px), xs (6px), sm (8px), md (10px), lg (12px), xl (16px), 2xl (20px), 3xl (24px) and 4xl (32px).
Examples#
Wrapping a row#
A row stays on one line by default and squeezes its children. Turn on wrap for things like tags and filters, where it is fine to break onto a second line.
import { Badge } from "@hel/ui/badge"
import { Flex } from "@hel/ui/flex"
One child takes the rest#
fill makes a child take whatever room is left, and lets it shrink below its natural size. That second part is what makes truncate work: without it, a long line of text pushes the other items out of the row instead of being cut with an ellipsis.
Invoice 2041, Northwind Traders, deliveries for the month of March
import { Badge } from "@hel/ui/badge"
import { Button } from "@hel/ui/button"
import { Flex } from "@hel/ui/flex"Choosing the element#
Flex renders a div. Use as for something more meaningful, like as="nav", as="ul" or as="header", so you don't need a wrapper just to get the right element.
Reacting to a sibling#
Set group and the element gets the group class. Children such as a checkbox label can then respond to the state of the control next to them, for example dimming when the checkbox is disabled. It is how a clickable row of a Checkbox and its label is put together without extra code.
Props#
| Prop | Type | Default |
|---|---|---|
direction | "row" | "column" | "row" |
gap | "none" | "3xs" to "4xl" | "none" |
align | "start" | "center" | "end" | "stretch" | "baseline" | "stretch" |
justify | "start" | "center" | "end" | "between" | "around" | "start" |
wrap | boolean | false |
padding | "none" | "px" | "3xs" to "4xl" | none |
fill | boolean | false |
group | boolean | false |
as | An element name, such as "nav" | "div" |
Flex takes every other prop of the element it renders.