Appearance Settings
The Floating Action Button component features built-in appearance parameters that allow you to customize virtually every aspect of its look and feel. The example at the bottom of the page lets you experiment with the available parameters.
Rounded
The Rounded parameter applies the border-radius CSS rule to the button to achieve curving of the edges. You can set it to a member of the Telerik.Blazor.ThemeConstants.Button.Rounded class:
| Class members | Manual declarations |
|---|---|
Small | sm |
Medium | md |
Large | lg |
Full | full (default) |
Size
You can increase or decrease the size of the button by setting the Size parameter to a member of the Telerik.Blazor.ThemeConstants.Button.Size class:
| Class members | Manual declarations |
|---|---|
Small | sm |
Medium | md (default) |
Large | lg |
ThemeColor
The color of the button is controlled through the ThemeColor parameter. You can set it to a member of the Telerik.Blazor.ThemeConstants.Button.ThemeColor class:
| Class members | Manual declarations |
|---|---|
Base (default) | base |
Primary | primary |
Secondary | secondary |
Tertiary | tertiary |
Info | info |
Success | success |
Warning | warning |
Error | error |
Dark | dark |
Light | light |
Inverse | inverse |
Example
Icon Variant
When using SVG icons, set the IconVariant parameter to select an available icon variant. See SVG icon variants.