ASP.NET Core Button Overview

The Button is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

The Telerik UI Button TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Button widget.

The Button provides a styled clickable UI functionality with arbitrary content. Apart from consistent Kendo UI for jQuery styling, the Button provides keyboard operability for elements, which natively do not have it—for example, span.

• Demo page for the Button HtmlHelper

• Demo page for the Button TagHelper

Initializing the Button

The following example demonstrates how to define the Button.

@(Html.Kendo().Button()
    .Name("textButton")
    .HtmlAttributes( new {type = "button"} )
    .Content("Text Button")
)

    <kendo-button name="textButton" type="button">Text Button</kendo-button>

Basic Configuration

• The Name() configuration method is mandatory as its value is used for the id and the name attributes of the Button element. Moreover, the id is used to properly initialize the Button widget. You can also use the value of the id attribute to retrieve the client-side instance of the Button.
• The Content() configuration specifies the text that is rendered within the button. This option does not accept HTML, but only string values.
• The Enable() option determines whether the widget will be initially enabled (by default) of disabled.
• The Tag() method allows the developer to determine whether the widget will be initialized from a <button> element (by default), or from an <a> element.

The following example demonstrates the available configuration options for the Button.

@(Html.Kendo().Button()
    .Name("textButton")
    .Content("Sample Button")
    .Enable(false)
    .Tag("a")
)

<script type="text/javascript">
    $(function() {
        // The Name() of the Button is used to get its client-side instance.
        var button = $("#textButton").data("kendoButton");
    });
</script>

<kendo-button name="textButton"
              enable="false"
              tag="a">
            Sample Button
</kendo-button>

<script type="text/javascript">
    $(function() {
        // The Name() of the Button is used to get its client-side instance.
        var button = $("#textButton").data("kendoButton");
    });
</script>

Functionality and Features

• Disabled Button—You can render the Button as disabled until certain conditions are met.
• Icon Button—The variety of icons allow you to enhance the appearance of the button.
• Badge Button—You can add a Badge to the Button to conveniently show its status, a notification, or a short message.
• Events—The Button allows you to handle its click event and implement custom functionality.

To learn more about the appearance, anatomy, and accessibility of the Button, visit the Telerik and Kendo UI Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

Next Steps

• Getting Started with the Button

• Basic Usage of the Button HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the Button TagHelper for ASP.NET Core (Demo)

• Button in Razor Pages

See Also

• Using the API of the Button for ASP.NET Core (Demo)
• Knowledge Base Section