FloatingActionButton Appearance
The FloatingActionButton provides predefined appearance options such as different sizes and theme colors.
The following example demonstrates all available appearance options of the FloatingActionButton in action.
Size
The FloatingActionButton allows you to set different padding to the internal content. To achieve this utilize the size property. It accepts values of type ButtonSize or none.
The size option supports the following values:
small—Sets thepaddingto8px.medium(Default)—Sets thepaddingto16px.large—Sets thepaddingto24px.none—The none option removes the built-in sizing. Allows for custompadding.
The following example demonstrates how to define the size of the FloatingActionButton.
Roundness
The FloatingActionButton 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 radiusto1px.medium—Sets theborder radiusto2px.large—Sets theborder radiusto4px.full(Default)—Sets theborder radiusto9999px. This would make the FloatingActionButton fully rounded. Depending on its content, it will render as a circle or pill respectively.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 FloatingActionButton.
Theme Colors
The FloatingActionButton allows you to specify predefined theme colors. The theme color will be applied as a background and border color while also amending the text color accordingly.
The available themeColor values are:
primary(Default)—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.none—Removes the color related styling.
The following example demonstrates how to specify the theme colors of the FloatingActionButton.