FlowHandle
A connection port on a node edge — where edges attach and interactive connect starts.
Category: display · WCAG 2.1-AA · flow, handle, port, connect
Variants
- source
- target
States
- default
- hover
- focus
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'source' | 'target' | — | Whether the handle is a connection source or target ('source' | 'target'). |
position | 'top' | 'right' | 'bottom' | 'left' | — | Edge of the node (defaults: source→right, target→left). |
id | string | — | Handle id for multi-handle nodes. |
isConnectable | boolean | true | Whether new connections can start or end at this handle. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-accent--cascivo-color-surface--cascivo-target-min-coarse
When to use
- Marking where edges connect to a node
- Enabling interactive connect (drag from a source to a target)
When not to use
- On nodes that are never connected
Examples
Source and target ports
() => (
<div style={{ position: 'relative', height: 160 }}>
<FlowNode id="api" defaultPosition={{ x: 70, y: 55 }}>
API
<FlowHandle type="target" position="left" />
<FlowHandle type="source" position="right" />
</FlowNode>
</div>
)