# Core Concepts

### Primary concept of the Modular Option

All four <mark style="color:orange;">**`Modular Options`**</mark> constructed from the parent widget - <mark style="color:blue;">**`Option Base`**</mark>:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FAj6e632sTn29gYFskfPf%2FOptionBase%20Concept.png?alt=media&#x26;token=fa9b16a4-fa8c-42bb-aceb-abad985962f3" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**`Option Base`**</mark> acts as an outer container, and they inherit all of its properties, including functions. However, there is one very important thing to note.&#x20;

Inside each of those four, there are identical by purpose and therefore by name <mark style="color:orange;">functions</mark> and <mark style="color:orange;">variables</mark> that are categorized and named the same (*or at least similarly*) and should be perceived as uniform across all <mark style="color:orange;">**`Modular Option`**</mark> types:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FQVmPDV7TxqlwFksLF21F%2FCommon%20for%20Option%20Type.png?alt=media&#x26;token=28830c07-9201-437a-937b-426948bb18bb" alt="" width="563"><figcaption></figcaption></figure>

***

### EssentialSubParts folder

All things inside the `Essential Sub Parts` folder are never meant to be used anywhere directly, those exist only to be building blocks for the other ~~normal~~ widgets:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FSRZ2HaUxKUgwqyQULTIa%2Fessential%20sub-parts.png?alt=media&#x26;token=8dc344b6-bff1-4f73-98e3-c60ac1924881" alt=""><figcaption></figcaption></figure>

***

### Collapsed Graphs in this project

If you ever see in `Event Graph` that there is something `collapsed` instead of being a `function` - then it was deliberately made that way and intended to be used <mark style="color:yellow;">only in this particular place</mark> and <mark style="color:yellow;">only by that blueprint</mark>.

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FBKwkNM0AfI3KOBcEi3F5%2FCollapsed%20graphs.png?alt=media&#x26;token=4eb56953-eecb-4194-a77b-111e0e95d124" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
With such an approach, not just the list of the functions becomes cleaner from the things that were never intended to be used as functions, but it also removes the possibility that other blueprints could accidentally use those things.
{% endhint %}

***

### Be careful with Toggle animations

Both `Toggle` widget types are based on animations. Some of that Animations functionality lays on changing certain variables from the blueprint, and with a neat UE trick, also call those `Set` functions with every animation tick. Be careful with the names for both variable, and its matching `Set` function.&#x20;

If you'll go to play with Animations there - Do not mess those up!

<div align="left"><figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FnJxPtudrt3y9vcO2VHdW%2FToggle%20Animation%20variables%20Set%20names.png?alt=media&#x26;token=ef9ceeb5-a437-4976-944d-c82b9199bd50" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
`Set` function animation's trick:

<https://youtu.be/qt3x64Grlq0?si=idGpZLyGUxKxgIYy>
{% endhint %}

***

### Stylizing Options Category buttons

<div align="left"><figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FMzjkoxTWYdP8Vncmunwg%2Fcategory%20buttons%20upclose.png?alt=media&#x26;token=f766e81a-5df3-48d3-84c8-4966db7e5ff1" alt=""><figcaption></figcaption></figure></div>

You've probably already noticed at the beginning of the previous <mark style="color:red;">**Section**</mark> when you were creating the `Page`, that `Category buttons` were automatically created. Once you want to <mark style="color:yellow;">**stylize**</mark> those - then you simply go and play with `WBP_ModularButtonOptionCategory`, but here is one issue though. Since those do not exist in the hierarchy tree - the only way to adjust its `Slot` properties - is to go in **Event Graph**:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FYDYtOEUGgNlMH25EXyAe%2FMake%20Option%20Category%20buttons.png?alt=media&#x26;token=d0a499e4-3420-4a0b-b65f-01bcc090e3ca" alt=""><figcaption></figcaption></figure>

***

### Confirmation Dialog

In case you want to use it for something more then for <mark style="color:purple;">`Window Mode`</mark> and <mark style="color:green;">`Resolution`</mark>, then go to the `Page Screen`, functions at category `Display: Confirmation Dialog`, and try recreate using that all as an example.

***

### Audio is not even worth mentioning

There is nothing to be documented really, it is all too simple and basic. Just go to the `Page Audio` and look at the way I did it all in the graph, everything is very self-explanatory.