New to Kendo UI for Vue? Start a free 30-day trial

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 component's appearance.

The current article provides details about how the component changes when the different configurations of its properties are applied. Here are the sections you can directly access:

Button Configurator demo
Button Sizes
Button Shape
Button Roundness
Button Fill Mode
Button Theme Colors

Configurator demo

The following example demonstrates configuring different aspects of a Button appearance through a configurator.

Change Theme

Theme

Loading ...

Size

The size of the Button is controlled through its size property. The values we can pass to the property are as follows:

small — Sets the padding to 2px and 8px.
medium(Default) — Sets the padding to 4px and 8px.
large — Sets the padding to 6px and 8px.
null — Passing null to the size property gives us the option to define a custom CSS class that sets the padding of the Button.

The following example demonstrates the usage of each size option:

Change Theme

Theme

Loading ...

Shape

The shape of the Button is controlled through its shape property. The values we can pass to the property are as follows:

rectangle(Default) — Sets a shape based on the rectangle option.
square — Sets a shape based on the square option.
null — Passing null to the shape removes the built-in shape of the Button.

The following example demonstrates the usage of each shape option:

Change Theme

Theme

Loading ...

Roundness

The roundness of the Button is controlled through its rounded property. The values we can pass to the property are as follows:

small — Sets the border radius to 1px.
medium(Default) — Sets the border radius to 2px.

large — Sets the border radius to 4px.

full — Sets the border radius to 9999px.
null — Passing null to the rounded property gives us the option to define a custom CSS class that defines the border-radius of the Button.

The following example demonstrates the usage of each rounded option:

Change Theme

Theme

Loading ...

Fill Mode

The styling of the Button is controlled through its fillMode property. The values we can pass to the property are as follows:

solid (Default) — Sets a background color and solid borders.
flat — Sets transparent background and borders in default state, and background color in focused state.
outline — Sets a transparent background and solid borders.
clear — Sets transparent background and borders in default state and background color in focused state.
link — Sets transparent background and borders.
null — Passing null to the fillMode property gives us the option to define a custom CSS class that defines the background and border of the Button.

The following example demonstrates the usage of each fillMode option:

Change Theme

Theme

Loading ...

Theme Colors

The color of the Button is controlled through its themeColor property.

base (Default) — The color of the Button will be based on the base theme color.
primary — The color of the Button will be based on the primary theme color.
secondary — The color of the Button will be based on thesecondary theme color.
tertiary — The color of the Button will be based on thetertiary theme color.
info — The color of the Button will be based on the info theme color.
success — The color of the Button will be based on the success theme color.
warning — The color of the Button will be based on the warning theme color.
error — The color of the Button will be based on the error theme color.
dark — The color of the Button will be based on the dark theme color.
light — The color of the Button will be based on the light theme color.
inverse — The color of the Button will be based on the inverse theme color.
null — Passing null to the themeColor property gives us the option to define a custom CSS class that sets the look of the Button.

The following example demonstrates the usage of each themeColor option:

Change Theme

Theme

Loading ...