NodePrimitive
stableDraggable graph node with status-driven styling and pulse animation
import { NodePrimitive } from "@nodus/design-system"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
idreq | string | — | Unique node identifier |
size | "small" | "medium" | "large" | "medium" | Node diameter |
status | "idle" | "active" | "completed" | "error" | "selected" | "idle" | Visual status |
label | string | — | Text label below the node |
draggable | boolean | — | Enable drag interaction |
onClick | (id: string) => void | — | Click handler |
idrequiredType
stringDefault —Unique node identifier
sizeType
"small" | "medium" | "large"Default "medium"Node diameter
statusType
"idle" | "active" | "completed" | "error" | "selected"Default "idle"Visual status
labelType
stringDefault —Text label below the node
draggableType
booleanDefault —Enable drag interaction
onClickType
(id: string) => voidDefault —Click handler
MobileTouch Target
Node tap area should be ≥44px for selectable/draggable nodes. Add hit-area padding via transparent border or larger bounding box when nodes are <44px.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?