Components / Separator
Separator
Visual divider, horizontal or vertical. Solid or gradient style with optional label.
layout v0.1.0
Playground
Examples
Solid (default)
<cg-separator></cg-separator>Gradient
<cg-separator variant="gradient"></cg-separator>With label
<cg-separator label="OR"></cg-separator>Gradient with label
<cg-separator variant="gradient" label="OR"></cg-separator>Spacing
<cg-stack gap="none"><cg-text>Above</cg-text><cg-separator spacing="lg"></cg-separator><cg-text>Below</cg-text></cg-stack>Vertical
<cg-stack direction="row" gap="md" style="height:60px;align-items:stretch"><cg-text>Left</cg-text><cg-separator orientation="vertical"></cg-separator><cg-text>Right</cg-text></cg-stack>Import
import { CgSeparator } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-separator';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "gradient" | "solid" | Line style — solid is a full line, gradient fades at edges |
orientation | "horizontal" | "vertical" | "horizontal" | Divider orientation |
spacing | "none" | "sm" | "md" | "lg" | "none" | Vertical spacing around divider |
label | string | — | Text label in center |