Separator
A thin line that divides groups of content. Screen readers announce it as a separator.
Account settings
Workspace settings
Code
demo.tsx
import {Separator, Stack, Text} from '@earendil-works/elanor-react';
export default function SeparatorDemo() {
return (
<Stack gap="medium" align="stretch">
<Text>Account settings</Text>
<Separator />
<Text>Workspace settings</Text>
</Stack>
);
}Usage
import {Separator} from '@earendil-works/elanor-react';
<Separator />;Vertical
orientation="vertical" divides items in a row. The parent needs a height for the line to fill.
12 projects3 teams
Code
vertical.tsx
import {Separator, Stack, Text} from '@earendil-works/elanor-react';
export default function SeparatorVertical() {
return (
<Stack
direction="row"
align="center"
gap="medium"
style={{blockSize: 'var(--semantic-dimension-size-medium)'}}
>
<Text render={<span />}>12 projects</Text>
<Separator orientation="vertical" />
<Text render={<span />}>3 teams</Text>
</Stack>
);
}API
Separator
Accepts Base UI Separator props.