Components Layout
Box
StableThe lowest-level layout primitive: padding, surface, border, radius and shadow from tokens.
Box renders any element with spacing and surface styles taken directly from Stance tokens. Use it to build one-off containers without writing CSS. When a pattern repeats, such as a card or a panel, prefer the dedicated component, which carries semantics and states.
Overview
Your organisation has 12 active email signatures.
import { Box, Text } from '@bindshq/stance-react';
export function Basic() {
return (
<Box padding={6} background="surface" border radius="lg" shadow="sm">
<Text size="sm">Your organisation has 12 active email signatures.</Text>
</Box>
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Your organisation has 12 active email signatures.
Your organisation has 12 active email signatures.
Your organisation has 12 active email signatures.
Import
import { Box } from '@bindshq/stance-react';Platforms
Box has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.
import { Box } from '@bindshq/stance-react';Playground
Organisation signature template
<Box />Examples
Surfaces
Each background sets a matching foreground, so text stays legible in every theme.
canvas
subtle
muted
surface
inverse
import { Box, Text } from '@bindshq/stance-react';
export function Surfaces() {
return (
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
gap: 12,
width: '100%',
}}
>
{(['canvas', 'subtle', 'muted', 'surface', 'inverse'] as const).map((bg) => (
<Box key={bg} padding={4} background={bg} border radius="md">
<Text size="sm" tone="inherit">
{bg}
</Text>
</Box>
))}
</div>
);
}Semantic element
Use `as` to render a landmark or list item while keeping the styling.
import { Box, Text } from '@bindshq/stance-react';
export function Semantic() {
return (
<Box
as="aside"
aria-label="Contract summary"
paddingX={5}
paddingY={4}
background="subtle"
radius="lg"
border="subtle"
>
<Text size="sm" weight="semibold">
Master services agreement
</Text>
<Text size="sm" tone="muted">
Renews on 1 March 2027
</Text>
</Box>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
as | keyof JSX.IntrinsicElements | 'div' | Element to render. |
padding | SpaceKey | None | Padding on all sides from the space scale. |
paddingX | SpaceKey | None | Horizontal padding; overrides padding on the x axis. |
paddingY | SpaceKey | None | Vertical padding; overrides padding on the y axis. |
background | 'canvas' | 'subtle' | 'muted' | 'emphasis' | 'surface' | 'surface-raised' | 'inverse' | None | Semantic surface with a matching foreground. |
border | boolean | 'subtle' | 'default' | 'strong' | None | Border strength. true means default. |
radius | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | None | Corner radius token. |
shadow | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | None | Elevation token. Becomes an outline in high contrast. |
Accessibility
- Box has no role of its own. Choose a semantic element with `as` (section, aside, li) when the content has structure.
- The inverse background flips foreground colour automatically, so contrast is preserved without extra props.
Usage guidelines
Do
- Use Box for one-off spacing and surfaces.
- Pick backgrounds by meaning (surface, subtle), not by colour.
Don’t
- Rebuild Card, Alert or Banner with Box; use the component.
- Override token colours with inline styles.