Appearance
The Button provides a predefined set of appearance options.
Apart from the default vision of the Button, these alternative styling options enable you to configure each individual aspect of the appearance of a Button.
Size
The KendoReact Button enables you to configure its size.
smalllargemedium(Default)nullDoes not set a sizeclassName
The following example demonstrates how to set the size of the Button.
Border Radius
The Button enables you to apply different border radius to the component through the rounded property.
The rounded option supports the following values:
smallmedium(Default)largefullnone— Does not set aclassNamefor size
The following example demonstrates how to define the border radius of the Button.
Fill Mode
The Button allows you to set different fill modes by using the fillMode property.
The fillMode option supports the following values:
solid(Default)flatoutlineclearlinknull
The following example demonstrates how to define the fill mode of the Button.
Theme Colors
The Button allows you to set different theme colors by using the themeColor property. It accepts values of type ButtonThemeColor or none.
The themeColor option supports the following values:
base(Default)—Applies coloring based on thebasetheme color.primary—Applies coloring based on theprimarytheme color.secondary—Applies coloring based on thesecondarytheme color.tertiary—Applies coloring based on thetertiarytheme color.info—Applies coloring based on theinfotheme color.success—Applies coloring based on thesuccesstheme color.warning—Applies coloring based on thewarningtheme color.error—Applies coloring based on theerrortheme color.dark—Applies coloring based on thedarktheme color.light—Applies coloring based on thelighttheme color.inverse—Applies coloring based on theinversetheme color.null— Does not set a theme colorclassName.
The following example demonstrates how to define the theme color of the Button.