Icon Button Nodes

Demonstrates creating nodes as interactive icon buttons using Lucide React icons with circular design in a tree layout.

Icon Button Nodes

Functional Overview

This example demonstrates creating nodes that appear as interactive icon buttons using Lucide React icons. The nodes use a custom circular design with embedded icons and text labels.

Implementation of Key Features

Icon Mapping System

const IconMapper: Record<string, React.FC<any>> = {
    football: Orbit,
    default: CircleDot
};

Circular Icon Node Slot

<RGSlotOnNode>
    {(nodeSlotProps) => {
        const { node } = nodeSlotProps;
        return (
            <div className="my-icon-node gap-2 flex rounded-full place-items-center justify-center">
                <LandPlotIcon size={10} />
                {node.text}
            </div>
        );
    }}
</RGSlotOnNode>

Tree Layout with Circular Nodes

const graphOptions: RGOptions = {
    backgroundColor: '#004466',
    defaultLineColor: 'rgba(255, 255, 255, 0.6)',
    defaultNodeColor: 'transparent',
    defaultNodeShape: RGNodeShape.circle,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 140,
        treeNodeGapV: 10
    }
};

Creative Use Cases

Control Panels: Create visual control panels with icon buttons for different functions. Tree structure shows control hierarchy.

Navigation Systems: Icon-based navigation trees where each icon represents a section or feature. Visual and intuitive navigation.

Quick Actions Menu: Hierarchical menu of quick actions represented by icons. Users drill down to find specific actions.

Dashboard Widgets: Interactive dashboard where nodes are widget controls. Icons indicate widget types and functions.

Settings Interface: Settings organized in a tree with icon buttons for each setting category. Visual metaphors help users find settings.

Feature Discovery: Interactive feature tree where users explore features by clicking icon nodes. Good for onboarding and help systems.

Layered Tools: Tools and subtools organized hierarchically with icons. Professional software interfaces often use this pattern.

Equipment Controls: Industrial equipment control panels with hierarchical icon buttons. Mimics physical control panel layouts.