Creating Component Variants

Updated on Feb 13, 2026

Component variants in ThemeBuilder allow you to expand 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 of 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 your requirements, you can add new component variants in two ways:

By adding component configuration.
By duplicating a component.

Both approaches help you achieve similar results but in a different way.

Component Configurations Overview

By default, the ThemeBuilder application lists the base components from the Kendo/Telerik suites with all properties set to Default and with the base component variation.

For example:

The default styling template for the Button component corresponds to a button with size, rounded, fillMode, and themeColor set to Default (this is the default value introduced in all Kendo theme flavors starting from version Q1 2026) and with the base variant set to Text (a Kendo Button can have three variants: Text, Icon & Text, and Icon Only).

When assigning a custom style directly on the default styling template, behind the scenes the ThemeBuilder application creates styles that apply globally to all Buttons.

For example, the generated CSS looks as follows:

css

.k-button {
  font-size: 12px;
}

The above works for creating common styles, but it is not a good approach for creating cascading styles for multiple button variants based on their built-in Kendo properties and features (variants). This is where creating component configurations or component duplicates comes in handy.

When creating a component configuration, you create a styling template in ThemeBuilder that generates styles with higher specificity based on the applied properties and variants.

For example, let's assume that you want to have a Button with themeColor set to Primary, size set to Large, and Variant set to Icon & Text. Then you can add the following configuration:

Behind the scenes, custom styles applied to that configuration generate a rule similar to the following:

css

.k-button.k-button-lg.k-button-primary {
  /* custom CSS here */
}

.k-button.k-button-lg.k-button-primary .k-button-icon {
  /* custom CSS here */
}

.k-button.k-button-lg.k-button-primary .k-button-text {
  /* custom CSS here */
}

With the above, you can now create your buttons in your application and the generated styles apply only to those that are explicitly using the defined properties and variants.

Adding Component Configuration

By adding a new component configuration, you create a new component variant by modifying the component properties provided by the theme. Such properties include size, theme color, fill mode, border radius, and other component-specific options.

Adding component configuration is a feature introduced for all Kendo and Telerik components with version Q1 2026 of the Telerik and Kendo UI themes. Projects with versions between Q2 2024 and Q4 2025 support component configurations only for the Button and TextBox components. If your project is based on a Telerik and Kendo UI theme earlier than Q2 2024, the Add Configuration feature is not available.

To create a component variant by adding component configuration:

In ThemeBuilder, select Advanced Edit.
Hover over the drill-down container with the desired component and select the ... button (more options).
Select Add Configuration.
In the ADD CONFIGURATION popup:
- Enter a name for the new component variant, for example, Primary Large Button.

Select the desired options from the drop-downs.

Create custom variant in Progress ThemeBuilder

1. Select **Add Configuration** to add the new component variant.

The newly created component variant with all applied options appears next to the default one. To see the applied options, select the ... button and then click See Configuration.

Component Duplicates Overview

Apart from creating component configuration, another approach for creating distinct styling variations of your components is to create and use duplicates. When a component in ThemeBuilder is duplicated, you use the exact same Kendo/Telerik property values and variants—the difference comes from a custom CSS class that needs to be explicitly added.

Duplicating a Component

When you duplicate a component, you create a new component variant by applying a new class to the existing component. You can duplicate not only the default component variants but also component variants created by adding component configuration.

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

In ThemeBuilder, select Advanced Edit.
Hover over the drill-down container with the desired component and click the Copy icon button. If the drill-down container has a ... button, then select ... > Duplicate.

Duplicate button in Progress ThemeBuilder

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.
Select Duplicate to add the new 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 lets you reuse 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 components from scratch.

To duplicate a previously created and styled component variant:

In ThemeBuilder, select Advanced Edit.
Hover over your component variant and select the ... button (more options) in the upper-right corner.

Context menu of a custom component instance in Progress ThemeBuilder

Select Duplicate from the drop-down menu.
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.
Select Duplicate to add the new 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.

Components Supporting Added Configuration

The following components support creating new variants by adding component configuration—a feature first introduced with Telerik and Kendo UI themes version Q2 2024. These components have an Add Configuration button in their ... (more options). Every subsequent ThemeBuilder version will add more components that support this functionality.

Component	Supports Added Configuration since
Button	Q2 2024
TextBox	Q2 2024
All Other Kendo and Telerik Components	Q1 2026

When migrating projects with theme versions earlier than Q2 2024 that contain styled Button or TextBox components to projects with theme versions Q2 2024 or later, the corresponding component variants are created automatically.