BlazorUI Demo

Floating action button

A fixed, high-prominence action anchored to a viewport corner. Use one only for the page's primary action.

Circular and extended
View code
<BuiFloatingActionButton Icon="LucideIcons.Plus" AriaLabel="Create item" Position="FloatingActionButtonPosition.BottomRight" />
<BuiFloatingActionButton Icon="LucideIcons.MessageSquare" Position="FloatingActionButtonPosition.BottomLeft" Circular="false">New message</BuiFloatingActionButton>
The circular action is fixed to the lower-right viewport corner; the extended example uses the lower-left corner.