Skip to main content

<NodeToolbar />

The node toolbar plugin component renders a toolbar that is attached to a node. The toolbar does not scale with the viewport so that the content of the toolbar is always readable.

info

The NodeToolbar component is available in reactflow version 11.3 and higher.

Usage Example​

Default Behavior​

Per default, the toolbar is connected to a node and visible only if the node is selected. If multiple nodes are selected, the toolbar is hidden again to prevent showing multiple toolbars at once. If you want to override this default behavior, you can set the isVisible prop by yourself.

Prop Types​

position?​

Description:
The position of the toolbar relative the node.
Type:
Position
Default:
'top'

align?​

Description:
The alignment of the toolbar.
Type:
Align
Default:
'center'

offset?​

Description:
The margin between the node and the toolbar in pixels.
Type:
number
Default:
10

nodeId?​

Description:
The id(s) of the node(s) that the toolbar should be attached to. You can pass multiple ids to render a toolbar for a multi-selection. If nodeId is not set, the toolbar will be attached to the custom node that it is mounted in.
Type:
string | string[]
Default:
The id of the custom node where the <NodeToolbar /> is rendered

isVisible?​

Description:
Set this to true to show the toolbar. Overwrites the default behavior.
Type:
boolean

style?​

Description:
Toolbar style attributes
Type:
CSSProperties

className?​

Description:
Additional class name
Type:
string

Typescript​

The interface of the NodeToolbar Prop Types are exported asNodeToolbarProps.

Npm Package​

The NodeToolbar component is published under @reactflow/node-toolbar and can also be installed and used separately.