Components Layout
Spacer
StableAdds a fixed gap from the scale, or flexes to push siblings apart.
Spacer is an escape hatch for the rare case where a gap belongs to one spot rather than to a whole group. In a flex row it grows to fill the remaining space, which pushes later items to the far edge. Prefer the `gap` prop of Stack and Inline wherever you can.
Overview
Signature templates
import { Button, Spacer, Text } from '@bindshq/stance-react';
export function Flexible() {
return (
<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
<Text size="sm" weight="semibold">
Signature templates
</Text>
<Spacer />
<Button size="sm">New template</Button>
</div>
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Signature templates
Signature templates
Signature templates
Import
import { Spacer } from '@bindshq/stance-react';Examples
Contract sent to legal@acme.com
You’ll be notified when all parties have signed.
import { Spacer, Text } from '@bindshq/stance-react';
export function Fixed() {
return (
<div>
<Text size="sm">Contract sent to legal@acme.com</Text>
<Spacer size={6} />
<Text size="sm" tone="muted">
You’ll be notified when all parties have signed.
</Text>
</div>
);
}import { Button, Spacer } from '@bindshq/stance-react';
export function Horizontal() {
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Button variant="outline" size="sm">
Back
</Button>
<Spacer size={4} axis="horizontal" />
<Button size="sm">Next</Button>
</div>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | SpaceKey | None | Fixed size. Omit to flex. |
axis | 'vertical' | 'horizontal' | 'vertical' | Axis of a fixed spacer. |
Accessibility
- Spacer is aria-hidden and never focusable.
Usage guidelines
Do
- Use a flexible spacer to push a trailing action to the end of a toolbar.
Don’t
- Chain spacers to build layouts; use Stack gap.