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
.
small
large
medium
(Default)null
Does 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:
small
medium
(Default)large
full
none
— Does not set aclassName
for 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)flat
outline
clear
link
null
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 thebase
theme color.primary
—Applies coloring based on theprimary
theme color.secondary
—Applies coloring based on thesecondary
theme color.tertiary
—Applies coloring based on thetertiary
theme color.info
—Applies coloring based on theinfo
theme color.success
—Applies coloring based on thesuccess
theme color.warning
—Applies coloring based on thewarning
theme color.error
—Applies coloring based on theerror
theme color.dark
—Applies coloring based on thedark
theme color.light
—Applies coloring based on thelight
theme color.inverse
—Applies coloring based on theinverse
theme color.null
— Does not set a theme colorclassName
.
The following example demonstrates how to define the theme color of the Button.