Blazor Floating Action Button Example - Styles

This sample demonstrates the customization options available for the Floating Action Button (FAB) using predefined styles and property-level settings. It outlines how to apply consistent, themeable appearance to FAB instances across an application, helping teams adhere to brand guidelines while maintaining accessibility and predictable behavior.

You can fully customize the FAB appearance using the following approaches:

• The CssClass property — apply predefined or custom CSS classes to control color, elevation, spacing, icon placement, and other visual tokens. Using semantic CSS class names promotes reuse, simplifies theming, and enables consistent updates across multiple FAB instances without modifying component logic. See the CssClass documentation for examples and recommended patterns.
• The IsPrimary property — toggle primary styling to emphasize a FAB when it represents the primary action on a screen. This property helps maintain visual hierarchy and improves recognition for key actions; the linked reference describes behavior and interaction state guidance.

The FAB provides a set of predefined styles that can be selected or extended via the CssClass property. These presets serve as a reliable baseline for color, size, and elevation, reducing bespoke CSS and accelerating implementation. When combined with custom classes, the presets enable consistent visual language while remaining easy to maintain across themes and breakpoints.

For accessibility and maintainability, prefer semantic class names and the component properties rather than inline styles. Using the IsPrimary toggle together with targeted CssClass assignments produces concise, themeable configurations that are simple to test and document. Apply state-specific classes for focus and hover states, and centralize brand tokens in your stylesheet so updates propagate automatically. These practices reduce duplication, improve cross-product consistency, and make it straightforward to align FAB visuals with evolving design requirements and accessibility guidelines.

Refer to the linked documentation for concrete code examples, implementation snippets, and recommended patterns to apply these appearance options consistently across projects and themes.