# Base Type (Inheritance) ### Introduction The `Base Type` variable can be used to specify both inheritance but also the type of an instance. `Base Type` on an instance indicates its type. This is usually automatically set when an instance is first created - usually by drag+dropping a component or standard element onto its target component or screen. Gum Screens and Components support changing `Base Type` to specify inheritance. By setting `Base Type`, a screen or component automatically inherits the following: * Variable values * Exposed variables * Instances * Available variables, such as stacking if inheriting from a container Inheritance is useful if your project needs multiple screens or components which share common variables or instances. ### Instance Base Type All instances must have a `Base Type` set. For example, the following instance is of type Container.

Instance named ContainerInstance is of type Container

`Base Type` is automatically assigned when a new instance is created. For example, the following animation shows a new ColoredRectangle instance created. Note that its `Base Type` is automatically assigned to ColoredRectangle.

Creating a new ColoredRectangle instance assigns the base type to ColoredRectangle

`Base Type` can be changed after an instance is created. Keep in mind that doing so does not change its name or any other properties, so you may need to manually adjust properties when converting between different `Base Types`. Also, note that default values may change when switching from one `Base Type` to another. The following shows a ColoredRectangle changed to a Container. Since Container and ColoredRectangle have different default `Width` and `Height` values, changing `Base Type` results in changes to default size too.

Changing `Base Type` can change other variables such as `Width` and `Height`

### Component Inheritance All components use inheritance even if their `Base Type` variable is not set explicitly. By default components inherit from the **Container** type.

Button component inheriting from Container

By inheriting from the **Container** type, components have access to all **Container** variables such as Children Layout. ### Inheriting from Standard Types Components can inherit from standard types. For example, instead of inheriting from **Container** a component may inherit from **ColoredRectangle**. By doing so, it has access to all properties on the **ColoredRectangle** type.

Component inheriting from ColoredRectangle

{% hint style="info" %} Most components inherit from the **Container** type. If a component needs to display visuals, such as a **ColoredRectangle**, typically the ColoredRectangle is added as a child to the component rather than being used as a `Base Type`. {% endhint %} ### Inheriting from Components Components can inherit from other components. By doing so the component inherits all children and exposed variables from its base component. A component which inherits from another component is often called a *derived* component. The component which is being inherited from is often called a *base* component. A base component can be used to define instances which the derived component can modify. For example a component named ButtonBase may define that all components have a ColoredRectangle named Background and a Text named TextInstance.

If another component uses ButtonBase as its `Base Type`, then this component automatically gets Background and TextInstance children which match the base instances.

Setting the base to ButtonBase automatically adds the same children to CancelButton

The CancelButton can modify variables on the added children. For example the CancelButton can modify the Text on the TextInstance and the color values on the Background.

CancelButton with modified children variables (Text and color values)

The derived component has the following restrictions when working with children instances: * Name cannot be changed. For example Background must always be named Background. * Base Type cannot be changed. For example, the base type for Background must be ColoredRectangle * Children defined in the base cannot be removed. For example, the Background child cannot be deleted from CancelButton. Children can be made invisible. If the base type adds new instances, then the derived types automatically get the same instances added as well. Similarly, if the base type deletes a child, then the child is also removed from the derived type.

Children added and removed to base types are also added and removed on the derived types

Derived types get access to all of the exposed variables in the base type. For example, if ButtonBase exposes the TextInstance's Text property, this is also available on the derived component.

### Base Type vs States `Base Types` allow for the customization of a component, including the creation of many variants. Similarly, States also allow for the customization of a component in similar ways. When deciding between whether to use states or inheritance, keep the following in mind: * States are often used to set variables temporarily, while inheritance is permanent. For example, a button may set its background color values in response to being highlighted. By contrast, a Cancel button may always say "Cancel". * States do not allow for the creation of new instances. Although derived components cannot delete children which are defined by their `Base Type`, derived components can add additional instances. * Components can use multiple categories. Therefore, it may not be clear which category defines the type of component. A component can only have one Base Type, so its type is defined clearly. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.flatredball.com/gum/gum-tool/gum-elements/general-properties/base-type-inheritance.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.