Creating Component Variants

Component variants in ThemeBuilder allow you to augment the collection of available component variations by adding new ones. The variants you add are based on the components that are already available in ThemeBuilder.

Out of the box, the Telerik and Kendo UI components deliver an extensive set component variants that allow you to achieve a specific look and feel. The Button, for example, offers a number of variants based on the component's state (normal, hover, active, and others), the component's fill mode (solid, outline, and flat), the component's color theme (primary and secondary), and even more.

If the built-in variations cannot cover you requirements, you can create new component variants in two ways:

• by duplicating an existing Telerik and Kendo UI component (creating a new variant)
• by duplicating a duplicate (creating a variant of a variant)

Duplicating an Existing Component

To duplicate an existing Telerik and Kendo UI component and create a component variant:

1. In ThemeBuilder, select Advanced Edit.
2. Hover over the drill-down container with the desired component and click the Copy icon button.
3. In the DUPLICATE popup:
   • Enter a name for the new component variant, for example, Error Button.
   • Enter a class name, for example, my-error-button—this becomes the selector for the newly created component variant.

The class name for the new component variant must be unique as it serves as a component variant selector. To deduce the complete selector for the new component variant, append the class name that you assigned to the root class of the component. For example, .my-error-button.k-button, where the root class is .k-button and the class name that you assigned is my-error-button.

Duplicating a Duplicate

You can generate additional component variants by building upon previously created and styled variants. This allows you build upon the styles that you've already applied to a component variant. By duplicating a duplicate, you take advantage of the inheritance chain, eliminating the need to restyle the original Telerik and Kendo UI component from scratch.

To duplicate a previously created and styled component variant:

1. In ThemeBuilder, select Advanced Edit.
2. Hover over your component variant and select the More Options button in the upper-right corner.
3. Select Duplicate from the drop-down menu.
4. In the DUPLICATE popup:
   • Enter a name for the new component variant, for example, Circle Error Button.
   • Enter a class name, for example, my-circle-error-button—this becomes the selector for the newly created component variant.

The DUPLICATE popup displays a hint with the chained predecessor classes, for example, .my-error-button. Use this information to deduce the complete selector for the newly created variant. For example, .my-circle-error-button.my-error-button.k-button, where .k-button is the selector for the root Button component, .my-error-button is the selector of the previously created variant, and .my-circle-error-button is the selector for the last variant in the chain.

Styling Component Variants

Consider the following when styling a component variant:

• Styling component variants works in the same way as with the base Telerik and Kendo UI components. For more details, see the Advanced Customization article.
• The component variant that you create inherits all styles from the duplicated component. For example, when duplicating the Button component, the new variant inherits all .k-button styles. For more information, see the article on styling strategies.

Related Articles

• Creating and Styling Component Variants (Knowledge Base Article)
• Setting the Color of a Flat Button in Its Hover and Focus States
• Applying Advanced Customizations