Appearance
In this article, you will find information about the styling options and rendering of the Telerik UI for ASP.NET Core Button.
For a complete example, refer to the Appearance Demo of the Button.
Options
The Button 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 to the Button. -
Rounded()—Determines the border radius of the component.
Size
To control the size of the Button, configure the Size option with any of the following values:
Small-
Medium(the default size) LargeNone
@(Html.Kendo().Button()
.Name("textButton")
.Size(ComponentSize.Medium)
.HtmlAttributes( new {type = "button"} )
.Content("Text Button")
)
<kendo-button name="textButton" size="ComponentSize.Medium">
Text Button
</kendo-button>
FillMode
The FillMode() method specifies how the color is applied to the component. The default Button fill mode is Solid.
@(Html.Kendo().Button()
.Name("textButton")
.FillMode(ButtonFillMode.Solid)
.HtmlAttributes( new {type = "button"} )
.Content("Text Button")
)
<kendo-button name="textButton" fill-mode="ButtonFillMode.Solid">
Text Button
</kendo-button>
The following options are available for the FillMode configuration:
SolidOutlineFlatLinkClearNone
ThemeColor
The ThemeColor configuration provides a variety of colors that can be applied to the Button. The available options are:
BasePrimarySecondaryTertiaryInfoSuccessWarningErrorDarkLightInverse
The default ThemeColor is Base.
@(Html.Kendo().Button()
.Name("textButton")
.ThemeColor(ThemeColor.Base)
.HtmlAttributes( new {type = "button"} )
.Content("Text Button")
)
<kendo-button name="textButton" theme-color="ThemeColor.Base">
Text Button
</kendo-button>
Rounded
The border radius of the Button can be customized through the Rounded() method. The default option is Medium.
@(Html.Kendo().Button()
.Name("textButton")
.Rounded(ButtonRounded.Medium)
.HtmlAttributes( new {type = "button"} )
.Content("Text Button")
)
<kendo-button name="textButton" rounded="Rounded.Medium">
Text Button
</kendo-button>
The following values are available for the Rounded option:
SmallMediumLargeFullNone
Rendering
Starting with version R1 2022, the component has a new rendering. For additional information on the decision behind these changes, visit the Components Rendering Overview article.
To review the latest rendering of the component, refer to the HTML specifications in the Kendo UI Themes Monorepo. The tests folder of the repository contains the rendering for all flavors of the components, providing a clear reference for how their elements are structured. The rendering information can help you customize a component's appearance and behavior by applying custom CSS or JavaScript to suit specific design or functional requirements.