Floating Action Button

Material Design 3 floating action button with speed dial menu for primary screen actions. Supports three sizes, standard and extended styles, 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

1. Go to the Components tab (right side panel, next to Screens)
2. Click New component — this creates a blank component
3. Click outside the new component to deselect it
4. Paste the YAML with Ctrl+V / ⌘V

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

* Stagger animation is web preview only

Size Variants

Small

40dp

Regular

56dp (default)

Large

72dp

The stagger entrance animation shown above is a web preview effect only. Power Apps Canvas components cannot run timers or animate children reactively, so items appear immediately when the speed dial opens. You can approximate a fade by wiring IsOpen to an Opacity formula on overlapping screen controls.

Input Properties

Property	Type	Default
`Color` FAB background color	Color	RGBA(37, 99, 235, 1)
`Disabled` Disables interaction and fades the button visually	Boolean	false
`Icon` Named icon (Plus, Edit, Share, Camera, Search, Check, X, Heart, Star, Upload, Download, Settings, Menu, Send) or raw SVG string or data: URI	Text	"Plus"
`IconColor` Icon stroke color as hex string. Applied when the speed dial is closed.	Text	"#FFFFFF"
`ItemSize` Height in pixels of each speed dial pill. Minimum 44 recommended for mobile touch targets. Controls pill height, icon bubble size, and row spacing.	Number	52
`Label` Text shown inline on the FAB when Style is "extended".	Text	"New Report"
`Size` "small" (40dp), "regular" (56dp), or "large" (72dp)	Text	"regular"
`SpeedDialItems` Table of actions with Icon, Label, and optional Color columns. When empty, tapping the FAB fires OnSelect instead of opening the menu. M3 recommends 3–6 items.	Table	3 sample items
`Style` "standard" shows an icon-only button. "extended" adds a text label to the right of the icon — useful for primary CTAs.	Text	"standard"
`Theme` "Light" or "Dark" — controls speed dial pill contrast	Text	"Light"

Events & Output

Property	Kind	Description
`OnSelect`	Event	Fires when FAB is tapped and SpeedDialItems is empty. When SpeedDialItems has rows, tapping toggles the menu instead.
`OnSpeedDialSelect`	Event	Fires when a speed dial pill is tapped. Read SelectedSpeedDialItem.Label or .Icon in the handler to route actions.
`IsOpen`	Output	True while the speed dial menu is visible. Wire to Opacity or Visible on screen controls to create a scrim effect.
`SelectedSpeedDialItem`	Output	Record of the last tapped speed dial item containing Icon, Label, and Color. Values persist until the next selection or Reset().

Implementation Details

The component renders a circular (or pill-shaped in extended mode) button anchored to the bottom-right of its bounding box. When SpeedDialItems contains rows, tapping the FAB toggles a vertical gallery that fans out above the button. Each gallery row is a single full-width colored pill with the label on the left and a frosted icon bubble on the right — matching the style in the preview above. The FAB icon automatically switches to an “X” when the menu is open.

The component dynamically resizes based on state. When closed, Width and Height match the Size setting (40, 56, or 72). When the speed dial opens, Height expands to fit all items (each ItemSize pixels tall) and Width grows to accommodate the longest label, capped at 240px to prevent overflow. Position the component bottom-right using X: Parent.Width - Self.Width - 20 and Y: Parent.Height - Self.Height - 20 — this keeps the FAB button anchored even as the component expands upward.

Speed dial pills use per-item Color for the fill, with the label text always white. The icon is rendered inside a semi-transparent frosted circle (RGBA(255,255,255,0.25)) on the right edge of the pill, giving a layered visual that works on any pill color. The icon supports 14 named icons, raw SVG strings, and data URIs — the same resolution logic used for the main FAB icon.

In extended mode (Style = "extended"), the FAB body grows to a pill shape and renders the Label text to the right of the icon. Width auto-calculates from Len(Label) * 8, capped at 280px. The font size scales with Size: 13px for small, 15px for regular, 18px for large. Extended mode works independently of SpeedDialItems — you can have an extended FAB that also opens a speed dial.

The Disabled state renders a semi-transparent white overlay rectangle inside the FAB body, washing out the color and icon without requiring Opacity support on GroupContainer. The hit button underneath is set to DisplayMode.Disabled, blocking interaction. A transparent Classic/Button backdrop covers the full component area when the speed dial is open, closing the menu on any outside tap — the same pattern used in cmpNavigationMenu.

SelectedSpeedDialItem is stored as an explicit record copy {Icon, Label, Color} rather than a gallery ThisItem reference. This prevents the stale-record bug where a second tap returns the previous item's values until a third interaction forces re-evaluation.

⚠ Known limitation: multiple instances of this component on the same screen share the app-scoped variables _fabOpen and _fabSelectedSD. Opening one will close the other. If you need two FABs on the same screen, fork the component and rename these variables.

Studio preview note: The speed dial gallery may only show the first item in Power Apps Studio's component editor canvas. This is a known design-time rendering limitation — the component evaluates input properties differently in the editor than at runtime. To test the full speed dial, save your app first, then use Publish and refresh the browser tab. Do not refresh without publishing first or you will lose unsaved changes.

Component Architecture

cmpFloatingActionButton
└── cntFabRoot (GroupContainer)
    ├── btnBackdrop (Classic/Button — full-area tap to close, visible when open)
    ├── galSpeedDial (Gallery — vertical, visible when open)
    │   └── cntSDRow (GroupContainer — per item, height = ItemSize)
    │       ├── cntSDPill (GroupContainer — full-width colored pill)
    │       │   ├── lblSDPillLabel (Text — item label, left-aligned)
    │       │   ├── btnSDIconBg (Classic/Button — frosted circle background)
    │       │   └── imgSDPillIcon (Image — inline SVG, centered on bubble)
    │       └── btnSDHit (Classic/Button — transparent tap target)
    └── cntFabBody (GroupContainer — main FAB, circle or extended pill)
        ├── imgFabMainIcon (Image — inline SVG, shows X when open)
        ├── lblFabExtLabel (Text — visible when Style = "extended")
        ├── rectDisabledOverlay (Rectangle — white overlay when Disabled)
        └── btnFabHit (Classic/Button — tap target, DisplayMode.Disabled when Disabled)

Examples

Simple add button (no speed dial)

// Set SpeedDialItems to an empty typed collection
// so OnSelect fires instead of toggling a menu
cmpFloatingActionButton.Icon = "Plus"
cmpFloatingActionButton.Color = RGBA(37, 99, 235, 1)
cmpFloatingActionButton.Size = "regular"
cmpFloatingActionButton.SpeedDialItems = colEmpty   // ClearCollect then Clear

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(168, 85, 247, 1)}
)

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

Extended FAB

cmpFloatingActionButton.Style = "extended"
cmpFloatingActionButton.Label = "New Report"
cmpFloatingActionButton.Icon = "Plus"
cmpFloatingActionButton.Color = RGBA(37, 99, 235, 1)

// Extended + speed dial works too —
// tapping opens the menu, button shows X

Large touch targets for mobile

New Task

Photo

// ItemSize controls pill height and icon bubble size
// 64 gives a 56px pill — easier to tap on mobile
cmpFloatingActionButton.ItemSize = 64

// Minimum recommended for touch is 44
cmpFloatingActionButton.ItemSize = 44

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 — use currentColor for dynamic stroke
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>
"
// currentColor is replaced with IconColor at render time
cmpFloatingActionButton.IconColor = "#FFFFFF"
cmpFloatingActionButton.Color = RGBA(124, 58, 237, 1)

Scrim effect using IsOpen

Content dimmed

// Dim screen content when speed dial is open
// Add this to any container or gallery behind the FAB:
Opacity = If(cmpFloatingActionButton.IsOpen, 0.3, 1)

// Or use a full-screen overlay rectangle:
rectScrim.Visible = cmpFloatingActionButton.IsOpen
rectScrim.Fill = RGBA(0, 0, 0, 0.3)

Community

Use the toolbar to format · or type markdown directly