ElyriDivider
A divider with horizontal/vertical orientations and solid / dashed / dotted / gradient styles. Horizontal dividers can carry a centred label with alignment and spacing controls.
Installation
Add component
pnpm dlx @elyri/cli@latest add dividerExamples
Basic
A horizontal solid line that fills its container by default.
import { Divider } from './components/elyri/Divider';
export function Example() {
return <Divider />;
}Variants
solid / dashed / dotted / gradient; gradient fades out at both ends.
solid
dashed
dotted
gradient
import { Divider } from './components/elyri/Divider';
const variants = ['solid', 'dashed', 'dotted', 'gradient'] as const;
export function Example() {
return (
<div style={{ display: 'flex', flexDirection: 'column', width: 'min(520px, 100%)' }}>
{variants.map((variant) => (
<Divider key={variant} variant={variant} label={variant} />
))}
</div>
);
}With label
Embed text in the line; align controls start / center / end.
Center
Start
End
import { Divider } from './components/elyri/Divider';
export function Example() {
return (
<div style={{ display: 'flex', flexDirection: 'column', width: 'min(520px, 100%)' }}>
<Divider label="Center" variant="gradient" />
<Divider label="Start" align="start" variant="gradient" />
<Divider label="End" align="end" variant="gradient" />
</div>
);
}Vertical
A vertical divider stretches to its parent height, great between inline elements.
Draft
Review
Done
import { Divider } from './components/elyri/Divider';
import { Tag } from './components/elyri/Tag';
export function Example() {
return (
<div style={{ display: 'flex', alignItems: 'stretch', gap: 4 }}>
<Tag>Draft</Tag>
<Divider orientation="vertical" />
<Tag variant="accent">Review</Tag>
<Divider orientation="vertical" variant="dashed" />
<Tag variant="success">Done</Tag>
</div>
);
}Spacing
spacing sets block spacing (inline for vertical): none / sm / md / lg.
Danger zone
import { Button } from './components/elyri/Button';
import { Divider } from './components/elyri/Divider';
export function Example() {
return (
<div style={{ width: 'min(520px, 100%)' }}>
<Button size="sm" variant="ghost">Delete account</Button>
<Divider spacing="sm" />
<Button size="sm" variant="ghost">Export data</Button>
<Divider spacing="lg" label="Danger zone" />
<Button size="sm" variant="danger">Remove workspace</Button>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientation: horizontal / vertical |
variant | 'solid' | 'dashed' | 'dotted' | 'gradient' | 'solid' | Style: solid / dashed / dotted / gradient |
spacing | 'none' | 'sm' | 'md' | 'lg' | 'md' | Spacing: none / sm / md / lg, defaults to md |
label | ReactNode | — | Centred label, horizontal only |
align | 'start' | 'center' | 'end' | 'center' | Label alignment: start / center / end, defaults to center |
...rest | HTMLAttributes | — | Remaining props are forwarded to the native div |