box
The container. Flex layout, background, border, title and footer - and the only primitive that holds children.
<box direction="column" border="single" title="Services" padding={1} gap={1}>
<text content="api" />
<text content="worker" />
</box>
Props
| Prop | Type | Default | |
| — | — | — | — |
| children | unknown | | |
| title | string | | Header text drawn into the top border. Needs a border to land on. |
| titleAlign | 'left' \| 'center' \| 'right' | | |
| footer | string | | Footer text drawn into the bottom border. |
| footerAlign | 'left' \| 'center' \| 'right' | | |
| scrollTop | number | | Scroll offset in cells, when overflow is ‘scroll’. |
| scrollLeft | number | | |
Plus everything on BaseProps.
A box is a flex container: direction, gap, padding, align,
justify, flex and the rest of the style keys all
land here. title and footer are drawn into the border, so they need one
to land on - without a border they are dropped rather than drawn as rows.
Because every node takes role, label and onKey, a bare box is already
enough to build an interactive element:
<box role="button" label="Restart" focusable onClick={() => {}}>
<text content="Restart" />
</box>
That is a working, focusable, queryable button. Button
exists because it also draws a ring, carries a tone and inverts when focused.
See also
- Row, Column - a box with its direction already set
- Panel - a titled box that follows the theme
- Base props - the style keys a box accepts