Components Layout
Separator
StableA thin rule between groups in menus, toolbars and lists.
Separator is a quiet one-pixel line. It is decorative by default and hidden from assistive technology. Set `decorative={false}` when it divides meaningful groups, for example in a toolbar. For section breaks in page content, use Divider.
Overview
Account
Organisation
import { Separator, Text } from '@bindshq/stance-react';
export function Basic() {
return (
<div style={{ width: '100%', display: 'grid', gap: 12 }}>
<Text size="sm">Account</Text>
<Separator />
<Text size="sm">Organisation</Text>
</div>
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Account
Organisation
Account
Organisation
Account
Organisation
Import
import { Separator } from '@bindshq/stance-react';Platforms
Separator 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 { Separator } from '@bindshq/stance-react';Examples
import { Button, Separator } from '@bindshq/stance-react';
export function Vertical() {
return (
<div
role="toolbar"
aria-label="Formatting"
style={{ display: 'flex', alignItems: 'center', gap: 8, height: 32 }}
>
<Button variant="ghost" size="sm">
Bold
</Button>
<Button variant="ghost" size="sm">
Italic
</Button>
<Separator orientation="vertical" decorative={false} />
<Button variant="ghost" size="sm">
Link
</Button>
</div>
);
}Rename
Duplicate
Delete template
import { Separator, Text } from '@bindshq/stance-react';
export function InList() {
return (
<div style={{ width: 220, display: 'grid', gap: 6 }}>
<Text size="sm">Rename</Text>
<Text size="sm">Duplicate</Text>
<Separator />
<Text size="sm" tone="danger">
Delete template
</Text>
</div>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Line direction. |
decorative | boolean | true | Hide from assistive technology; false exposes role="separator". |
Accessibility
- Decorative separators use role="none".
- Semantic separators expose role="separator" and aria-orientation when vertical.
Usage guidelines
Do
- Use between groups of related actions.
Don’t
- Use as a heading underline.