Appearance

The FloatingActionButton component provides many predefined appearance options such as different shapes, sizes and theme colors.

• Size
• Rounded
• Theme Color

Size

The FloatingActionButton allows you to set different sizes.

The available size values are:

• small—Applies half of the default padding, e.g. 8px.
• medium (Default)—Applies the default padding, e.g. 16px.
• large—Applies one and one half of the default padding, e.g. 24px.
• null—Does not set a className for size.

Change Theme

Theme

Loading ...

Rounded

The FloatingActionButton allows you to set different rounding options.

The available rounded values are:

• small
• medium (Default)
• large
• full
• null—Does not set a theme color className.

Change Theme

Theme

Loading ...

Theme Color

The FloatingActionButton allows you to specify predefined theme colors.

The available themeColor values are:

• primary (Default)—Applies coloring based on the primary theme color.
• secondary—Applies coloring based on the secondary theme color.
• tertiary—Applies coloring based on the tertiary theme color.
• info—Applies coloring based on the info theme color.
• success—Applies coloring based on the success theme color.
• warning—Applies coloring based on the warning theme color.
• error—Applies coloring based on the error theme color.
• dark—Applies coloring based on the dark theme color.
• light—Applies coloring based on the light theme color.
• inverse—Applies coloring based on the inverted theme color.
• null—Does not set a theme color className.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the FloatingActionButton
• API Reference of the FloatingActionButtonProps
• Creating Custom Styles with ThemeBuilder