New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Appearance

Updated on Feb 11, 2026

In this article, you will find information about the styling options of the Telerik UI for ASP.NET MVC SmartPasteButton.

For a complete example, refer to the Appearance Demo of the SmartPasteButton.

Options

The SmartPasteButton component provides the following options for styling:

Size()—Configures the overall size of the component.
ThemeColor()—Sets what color will be applied to the component.
FillMode()—Defines how the color is applied.
Rounded()—Determines the border radius of the component.
Icon()—Specifies the icon displayed on the button in its default state.
CancelIcon()—Specifies the icon displayed when the button is in listening/processing state.

Size

To control the size of the SmartPasteButton, configure the Size() method with any of the following values:

Small
Medium
Large

To apply the none size (as shown in the demo), use the client-side setOptions() configuration.

Razor

@(Html.Kendo().SmartPasteButton()
    .Name("smartPasteButton")
    .Service("https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste")
    .Text("Smart Paste")
    .Size(ComponentSize.Medium)
)

FillMode

The FillMode() method specifies how the color is applied to the component.

Razor

@(Html.Kendo().SmartPasteButton()
    .Name("smartPasteButton")
    .Service("https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste")
    .Text("Smart Paste")
    .FillMode(FillMode.Solid)
)

The following options are available for the FillMode configuration:

Solid
Flat
Outline

To apply the link, clear, or none fill modes (as shown in the demo), use the client-side setOptions() configuration.

ThemeColor

The ThemeColor configuration provides a variety of colors that can be applied to the SmartPasteButton. The available options are:

Base
Primary
Secondary
Tertiary
Info
Success
Warning
Error
Dark
Light
Inverse

Razor

@(Html.Kendo().SmartPasteButton()
    .Name("smartPasteButton")
    .Service("https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste")
    .Text("Smart Paste")
    .ThemeColor(ThemeColor.Base)
)

Rounded

The border radius of the SmartPasteButton can be customized through the Rounded() method.

Razor

@(Html.Kendo().SmartPasteButton()
    .Name("smartPasteButton")
    .Service("https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste")
    .Text("Smart Paste")
    .Rounded(Rounded.Medium)
)

The following values are available for the Rounded option:

Small
Medium
Large
Full
None

The None value is deprecated. Use custom CSS instead.

Icon

The SmartPasteButton supports icon customization through the Icon() method. The icon value is the name of a Kendo UI font icon (for example, paste-sparkle, copy, or microphone-outline).

Razor

@(Html.Kendo().SmartPasteButton()
    .Name("smartPasteButton")
    .Service("https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste")
    .Text("Smart Paste")
    .Icon("paste-sparkle")
)

CancelIcon

The CancelIcon() method sets the icon displayed while the SmartPasteButton is in listening/processing state.

Razor

@(Html.Kendo().SmartPasteButton()
    .Name("smartPasteButton")
    .Service("https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste")
    .Text("Smart Paste")
    .CancelIcon("cancel")
)

Updating the Appearance on the Client

In the demo, the SmartPasteButton is updated through setOptions() on the client. The client-side configuration uses the JavaScript option names (size, themeColor, rounded, fillMode, icon).

Razor

@(Html.Kendo().SmartPasteButton()
    .Name("smartPasteButton")
    .Service("https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste")
    .Text("Smart Paste")
)

<script>
    function onChange(e) {
        var size = $("#size").data("kendoDropDownList").value();
        var themeColor = $("#themeColor").data("kendoDropDownList").value();
        var rounded = $("#rounded").data("kendoDropDownList").value();
        var fillMode = $("#fillMode").data("kendoDropDownList").value();
        var icon = $("#icon").data("kendoDropDownList").value();

        var options = {
            size: size,
            themeColor: themeColor,
            rounded: rounded,
            fillMode: fillMode,
            icon: icon
        };

        var smartPasteButton = $("#smartPasteButton").data("kendoSmartPasteButton");
        smartPasteButton.setOptions(options);
    }
</script>