Button Appearance
The Button provides predefined appearance options such as different sizes, border radiuses, fill modes and theme colors.
The following example demonstrates all available appearance options of the Button in action.
Size
The Button allows you to configure its padding
. To achieve this utilize the size
property. It accepts values of type ButtonSize
or none
.
The size
option supports the following values:
small
medium
(Default)large
none
—Removes the built-in sizing styles, allowing you to fully customize thepadding
.
The following example demonstrates how to define the size of the Button.
Roundness
The Button enables you to apply different border radius
to the component through the rounded
property. It accepts values of type ButtonRounded
or none
.
The rounded
option supports the following values:
small
—Sets theborder radius
to1px
.medium
(Default)—Sets theborder radius
to2px
.large
—Sets theborder radius
to4px
.full
—Sets theborder radius
to9999px
.none
—The none option removes the built-in roundness. Allows for customborder radius
.
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. It accepts values of type ButtonFillMode
or none
.
The fillMode
option supports the following values:
solid
(Default)—Sets abackground color
andsolid borders
.flat
—Setstransparent background and borders
in default state, andsolid borders
in focused state.outline
—Sets atransparent background
andsolid borders
.clear
—Setstransparent background and borders
in default state andbackground color
in focused state.link
—Setstransparent background and borders
.none
—The none option removes the built-in fill mode styles. Allows for custombackground
andborder
styles.
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.none
—The none option removes the built-in theme color. Allows for a custom color.
The following example demonstrates how to define the theme color of the Button.