After you have a Component set in the Instance, you can modify its properties by clicking in the Property 'Properties'

When you open the properties of a component, it will display the editable properties for its different sections as defined in the component template.

You will notice that some properties are for entering text, others the name of a class, or a combo that contains different options to choose from.

These combos, in their last item, have a 'Custom' property that enables a new field to enter the class you want to apply to that property.

If you right click on the component and click 'Customize Component', you will see that that class was applied on the corresponding object. In order for you to see the changes, you have to have your class defined in the Design System that you have defined for your platform.

The classes you need depend on the object you are customizing, for example if it is a button, a table, a text, you will have your own class because they have different ways to be customized.

The properties defined for a component object can be found in the component definition, you can customize them, delete them or create new properties.

In the case of Background Color shown in the example, it has the options 'Primary', 'Info', 'Success', Warning, Danger and Transparent. These are defined in the component template as follows: <ClassName>:<OptionName>;

Where <ClassName> is a class defined in the DesignSystem and <OptionName> is the name you want it to appear in the combo.



The class defined in the Design System is as simple as