Components Layout
Inline
StableLays children out horizontally and wraps them, for tags, actions and metadata.
Inline is a horizontal Stack that wraps by default and centres its items. Use it for groups that should reflow onto new lines on small screens: filters, tag lists, toolbars of buttons and metadata rows.
Overview
LegalFinanceSalesCustomer successEngineeringPeople operations
import type { ReactNode } from 'react';
import { Inline } from '@bindshq/stance-react';
const Pill = ({ children }: { children: ReactNode }) => (
<span
style={{
padding: '4px 10px',
border: '1px solid var(--st-color-border-default)',
borderRadius: 999,
fontSize: 13,
}}
>
{children}
</span>
);
export function Basic() {
return (
<Inline gap={2}>
{['Legal', 'Finance', 'Sales', 'Customer success', 'Engineering', 'People operations'].map(
(d) => (
<Pill key={d}>{d}</Pill>
),
)}
</Inline>
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
LegalFinanceSalesCustomer successEngineeringPeople operations
LegalFinanceSalesCustomer successEngineeringPeople operations
LegalFinanceSalesCustomer successEngineeringPeople operations
Import
import { Inline } from '@bindshq/stance-react';Examples
import { Button, Inline } from '@bindshq/stance-react';
export function Actions() {
return (
<Inline gap={2}>
<Button variant="ghost">Cancel</Button>
<Button variant="outline">Save draft</Button>
<Button>Send for signature</Button>
</Inline>
);
}Updated 4 Nov 2026
Owner: Priya Raman
Press Command + K to search
import { Inline, Kbd, Text } from '@bindshq/stance-react';
export function Metadata() {
return (
<Inline gap={3}>
<Text size="sm" tone="muted">
Updated 4 Nov 2026
</Text>
<Text size="sm" tone="subtle" aria-hidden="true">
·
</Text>
<Text size="sm" tone="muted">
Owner: Priya Raman
</Text>
<Text size="sm" tone="subtle" aria-hidden="true">
·
</Text>
<Text size="sm" tone="muted">
Press <Kbd keys={['mod', 'k']} size="sm" /> to search
</Text>
</Inline>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
as | keyof JSX.IntrinsicElements | 'div' | Element to render. |
gap | SpaceKey | 2 | Gap between children. |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | 'center' | Cross-axis alignment. |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | None | Main-axis distribution. |
wrap | boolean | true | Wrap onto new lines. |
Accessibility
- Visual wrapping does not change reading order.
- Use `as="ul"` for lists of tags so their count is announced.
Usage guidelines
Do
- Use for content that may wrap on small screens.
Don’t
- Use for vertical rhythm; use Stack.