Buttons & Actions
Floating Action Button
A circular icon button that floats over screen content and triggers the most important action on the screen. It is not for notifications, URL opening, or form submission - for those, use BuilderNotificationButton or BuilderButton.
Floats over screen content with a built-in drop shadow.
No URL or notification modal support by design.
Tap actions fire only in AppPlayer preview, not on the builder canvas.
Four things worth knowing
Circular icon button that floats
Sits on top of screen content with a built-in drop shadow. Size options are small (48px), medium (56px), and large (64px).
Large Ionicons library
Icon is chosen from the full Ionicons v5 set via a scrollable picker in the builder canvas property editor.
Three action modes only
Supports none, alert, navigate-screen, and go-back. URL and notification modal actions are explicitly filtered out.
Preview-safe execution
Tap actions are disabled on the builder canvas and run only when isPreview=true is injected by AppPlayer.
Find it, drop it, wire the action
Where to find itAdd it to the target screen
- Tap + in the builder and find Floating Action Button under Buttons & Actions.
- Drop it onto a screen with one clear primary next action.
- Use the Content tab to pick an icon, Style tab for colors and size, and Action tab to wire the tap behavior.
Before you publishThree things to check
- Confirm the action type:
navigate-screenrequires a valid screen ID inactionData;alertuses it as message text. - Keep strong contrast between
backgroundColorandiconColorso the FAB is always visible. - Test placement in preview mode - the button will not fire on the builder canvas.
Icon, sizing, action, and runtime
| Prop | Type | Default | Description |
|---|---|---|---|
iconName | string | add | Ionicons v5 icon name to display inside the button. |
size | select | medium | small (48px), medium (56px), large (64px) - controlled by SIZE_MAP in BuilderFAB.tsx. |
backgroundColor, iconColor, shadowColor | string | #007AFF, #fff, #000 | Surface fill, icon tint, and drop shadow color (opacity fixed at 0.25). |
onPressAction, actionData | select / string | none, empty | Action type and payload. navigate-screen requires a screen ID; alert uses it as message text. |
isPreview, onScreenNavigate, onGoBack | runtime | Injected by AppPlayer | Preview guard plus navigation and back callbacks used during action execution. |
Make it yours
The FAB is icon-only by design. Customization is limited to icon, size, colors, and shadow - no label, text, or generic action extensions.
| Prop | Default | What it controls |
|---|---|---|
iconName | add | Icon displayed inside the circular button. |
size | medium | Overall button diameter via SIZE_MAP in BuilderFAB.tsx. |
backgroundColor | #007AFF | Circular button fill color. |
iconColor | #fff | Icon tint - keep high contrast against background. |
shadowColor | #000 | Drop shadow hue; opacity is fixed at 0.25. |
Common mistakes to avoid
Button press does nothing on canvas
Expected behavior. Actions fire only in AppPlayer preview mode, not while editing on the builder canvas.
Wrong component for URLs or notifications
The FAB does not support open-url or open-notification-modal. Use BuilderButton or BuilderNotificationButton for those flows.
Adding a new action type needs three updates
Update the union type and handlePress in BuilderFAB.tsx, the action filter in ComponentPropertyEditor.tsx, and the propDefinitions options in the registry.
Duplicate icon keys cause render errors
When adding icons to registry options, check for duplicates first. Duplicate keys cause React render issues.