Components
DiagramConnector
An SVG arrow connector with solid, dashed, or animated variants for linking diagram nodes.
Import
import { DiagramConnector } from "@sigil-ui/components";Preview
Usage
<DiagramConnector />Variants
<DiagramConnector variant="solid" />
<DiagramConnector variant="dashed" />
<DiagramConnector variant="dashed-animated" />Vertical direction
<DiagramConnector direction="vertical" length={80} />With label
<DiagramConnector label="HTTPS" length={100} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "dashed" | "dashed-animated" | "dashed-animated" | Line style |
direction | "horizontal" | "vertical" | "horizontal" | Arrow direction |
label | string | — | Text label along the connector |
length | number | 60 | Length in pixels |
strokeColor | string | var(--s-border-strong) | Custom stroke color |
arrowSize | number | 6 | Arrowhead size in pixels |
className | string | — | Additional CSS classes |
Plus all standard <svg> HTML attributes.