Diagram Connector
Link diagram elements with a styled connector.
Preview
Import
import { DiagramConnector } from "@sigil-ui/components";Usage
<div className="flex flex-wrap items-center justify-center gap-4"><DiagramNode label="Client" /><DiagramConnector direction="horizontal" label="HTTPS" length={100} /><DiagramNode label="API" /></div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | ConnectorVariant | — | Selects a supported visual treatment. |
direction | ConnectorDirection | — | Direction configuration. |
label | string | — | Readable label for the component. |
length | number | — | Length configuration. |
strokeColor | string | — | Stroke Color configuration. |
arrowSize | number | — | Arrow Size configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border-strong | Border strong |
--s-border | Border |
--s-text-muted | Text muted |
--s-font-mono | Font mono |