Floating Action Button

Material Design 3 floating action button with speed dial menu for primary screen actions. Supports three sizes, 14 built-in icons, custom SVG, and per-item color theming.

Modern controls required

Most components in this library use modern control properties like LayoutMode, AutoLayout, and LayoutDirection. Enable them in Power Apps Studio under Settings → Updates → Preview → Modern controls and themes.

cmpFloatingActionButton.yaml

Paste into Power Apps Studio → Components → New component → Import from code

Preview

Taskify

Dashboard

Track your tasks and progress

Total Tasks

+12% vs last week

Completed

+8% vs last week

In Progress

Click FAB to toggle speed dial

Size Variants

Small

40dp

Regular

56dp (default)

Large

96dp

Input Properties

Property	Type	Default
`Color` FAB background color	Color	RGBA(37, 99, 235, 1)
`Disabled` Disable interaction	Boolean	false
`Icon` Named icon (Plus, Edit, Share, Camera, Search, Check, X, Heart, Star, Upload, Download, Settings, Menu, Send) or custom SVG string	Text	"Plus"
`IconColor` Icon stroke color as hex string	Text	"#FFFFFF"
`Size` "small" (40dp), "regular" (56dp), or "large" (96dp)	Text	"regular"
`SpeedDialItems` Table of actions with Icon, Label, and optional Color columns. M3 recommends 3–6 items.	Table	3 sample items
`Theme` "Light" or "Dark" — controls speed dial chip colors	Text	"Light"

Events & Output

Property	Kind	Description
`OnSelect`	Event	Fires when FAB is tapped and SpeedDialItems is empty. If SpeedDialItems has rows, tap toggles the menu instead.
`OnSpeedDialSelect`	Event	Fires when a speed dial item is tapped. Read SelectedSpeedDialItem to determine which.
`IsOpen`	Output	Whether the speed dial menu is currently visible.
`SelectedSpeedDialItem`	Output	Record of the last tapped speed dial item (Icon, Label, Color).

Implementation Details

The component renders a circular button (cntFabBody) anchored to the bottom-right of its bounding box. When SpeedDialItems contains rows, tapping the FAB toggles a vertical gallery (galSpeedDial) that fans out above the button. Each gallery row contains a colored circle with an icon on the right and a label chip on the left, matching the Material Design 3 speed dial pattern. The FAB icon automatically switches to an “X” when the menu is open.

The component dynamically resizes itself based on state. When closed, Width and Height match the Size setting (40, 56, or 96). When the speed dial opens, Height expands to accommodate all items (each 52px tall plus a 12px gap) and Width increases to 220px to fit labels. This means you should place the component in the bottom-right of your screen with enough vertical space for the menu to expand.

Icons use inline SVG rendered through the Image control. The component includes 14 named icons (Plus, Edit, Share, Camera, Search, Check, X, Heart, Star, Upload, Download, Settings, Menu, Send) mapped to Lucide-compatible SVG paths. You can also pass a raw SVG string or a data URI for custom icons. Icon color is applied via stroke replacement in the SVG markup.

Speed dial items support per-item colors through the optional Color column. When Color is blank, the item circle inherits the main FAB Color. The label chip background is theme-aware: white in Light mode, dark zinc in Dark mode. The component stores the selected item in SelectedSpeedDialItem and automatically closes the menu on selection.

OnSelect only fires when SpeedDialItems is empty (simple FAB mode). When SpeedDialItems has rows, tapping the FAB toggles the menu instead, and individual item taps fire OnSpeedDialSelect. Use cmpFloatingActionButton.SelectedSpeedDialItem in your OnSpeedDialSelect handler to route actions via Switch on the Label or Icon.

The component uses a semi-light drop shadow on the main button for elevation. A transparent Classic/Button overlay handles tap events with subtle hover and press fills for tactile feedback. The Disabled property switches the overlay to DisplayMode.Disabled, graying out interaction while preserving the visual.

Component Architecture

cmpFloatingActionButton
└── cntFabRoot (GroupContainer)
    ├── galSpeedDial (Gallery — vertical, visible when open)
    │   └── cntSDRow (GroupContainer — per item)
    │       ├── cntSDChip (GroupContainer — label pill)
    │       │   └── lblSDLabel (Text — item label)
    │       ├── cntSDCircle (GroupContainer — colored icon circle)
    │       │   └── imgSDIcon (Image — inline SVG)
    │       └── btnSDHit (Classic/Button — tap target)
    └── cntFabBody (GroupContainer — main FAB circle)
        ├── imgFabMainIcon (Image — inline SVG, X when open)
        └── btnFabHit (Classic/Button — tap target)

Examples

Simple add button

cmpFloatingActionButton.Icon = "Plus"
cmpFloatingActionButton.Color = RGBA(37, 99, 235, 1)
cmpFloatingActionButton.Size = "regular"

cmpFloatingActionButton.OnSelect = Navigate(NewItemScreen)

Speed dial menu

New Task

Quick Note

Photo

cmpFloatingActionButton.SpeedDialItems = Table(
    {Icon: "Plus",   Label: "New Task",   Color: RGBA(37, 99, 235, 1)},
    {Icon: "Edit",   Label: "Quick Note", Color: RGBA(5, 150, 105, 1)},
    {Icon: "Camera", Label: "Photo",      Color: RGBA(217, 70, 239, 1)}
)

cmpFloatingActionButton.OnSpeedDialSelect =
    Switch(
        cmpFloatingActionButton.SelectedSpeedDialItem.Label,
        "New Task",   Navigate(NewTaskScreen),
        "Quick Note", Navigate(NoteScreen),
        "Photo",      Launch(Camera)
    )

Color variants

// Primary
cmpFloatingActionButton.Color = RGBA(37, 99, 235, 1)

// Success
cmpFloatingActionButton.Color = RGBA(5, 150, 105, 1)

// Danger
cmpFloatingActionButton.Color = RGBA(225, 29, 72, 1)

// Warning
cmpFloatingActionButton.Color = RGBA(245, 158, 11, 1)

Custom SVG icon

// Pass raw SVG markup
cmpFloatingActionButton.Icon = "
    <svg xmlns='http://www.w3.org/2000/svg'
         viewBox='0 0 24 24' fill='none'
         stroke='currentColor' stroke-width='2'>
        <path d='M12 3v18'/>
        <path d='M5.5 7l3-3 3 3'/>
        <path d='M12.5 7l3-3 3 3'/>
    </svg>
"
cmpFloatingActionButton.Color = RGBA(124, 58, 237, 1)

Dark theme with size small

cmpFloatingActionButton.Theme = "Dark"
cmpFloatingActionButton.Size = "small"
cmpFloatingActionButton.Color = RGBA(37, 99, 235, 1)