# Custom Techtree Node Button

The simplest way to create a custom techtree node button would be to duplicate an existing one.

1. Navigate to the folder <mark style="background-color:blue;">Addons/Techtree/Runtime/Prefabs</mark>
2. Select a prefab and duplicate it.

<figure><img src="https://2348672745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIoqF5QAgQsqxrjmTIKpE%2Fuploads%2FzO4GMnhXFBfVbTsWmDZU%2Ftechtree_techtreeNodeButton.png?alt=media&#x26;token=8f1258fa-f9b2-4121-be75-d717f61e990d" alt=""><figcaption></figcaption></figure>

It is important that the TechtreeUINode component is assigned at the root of the prefab. You can now start modifying the prefab as you like.

### UI References

* Show Tooltip: If enabled, a tooltip will be shown. To setup the tooltip system please read: [Tooltip](tooltip)
* Title label: The techtree label ui element.
* Icon: The techtree icon ui element.
* Research Button: The actual ui element button which starts a research.
* Progress Parent: The parent object of the progress bar.
* Progress Bar: The progress bar element (Image ui element with a type set to Filled)
* Progress Txt: The progress label which shows the current research progress.
* On Researched Active UI Objects: Assign objects which should be set to active when research is complete

### Colors

Here you can define different tint colors for different UI elements.
