The Floating Action Button (FAB) block is a mobile-app-only button that floats over your content, pinned to one of the four corners of the area it is placed in. Its face is a fully composable Body slot — a new FAB arrives as a round, brand-colored circle holding a white plus icon, and you can replace that with any layout. It fires a single On Click event.
Warning: Mobile only. This block is not offered in the web builder. Plan a separate pattern (a fixed-position Button) for web layouts.
Tip: When to use FAB: Give a mobile screen one always-reachable primary action — create, compose, scan — that stays put while content scrolls behind it. Pick FAB over a regular Button when the action must float over content instead of sitting in the layout flow.
Properties
Slots
| Property | Type | Default | Description |
slots.body | body slot (one block) | Round brand stack with plus icon | The FAB's face. Replace with any layout; the whole area acts as one tap target. |
Appearance
Property | Type | Default | Description |
|---|---|---|---|
|
|
| Which corner the FAB pins to. |
Draggable ( | boolean | Off | Lets people drag the FAB around on the phone. A short press is still a tap. Where it was left isn't saved: it starts at its Placement corner each time the page opens. The builder canvas and web previews never drag. |
Snap to ( |
|
| Shown while Draggable is on. Where a dragged FAB settles: the nearest side, the nearest corner, or where it was let go. |
| condition | — | Currently has no effect. See the gotchas below. |
| style set |
| Margin only: the FAB's offset from its corner. |
Events
| Event | Trigger | Available when |
On Click | The user taps anywhere on the FAB | Always |
Behavior & Gotchas
Warning: The Disabled setting has no effect. The FAB stays tappable regardless of the Disabled condition. Use Visibility to hide it instead, or guard the On Click actions.
Warning: An empty body makes the whole FAB disappear. If the Body slot has no content, the FAB renders nothing at all. Deleting the body's blocks while restyling silently removes the button.
Note: The FAB pins to its parent's corner, not always the screen's. Drop it at the page level and it floats over the whole screen; drop it inside a smaller container and it pins to that container's corner and scrolls with it.
Pressable
The Pressable block turns any layout you design into a single tappable region. It wraps one or more child blocks and makes the entire group respond to a tap or a long press. It is not a styled button — it has no label or icon of its own and inherits its look from its children. What it adds is press feedback: configurable dimming (opacity), shrink/grow (scale), highlight color, and on mobile — haptic buzz and an Android ripple — plus a flex layout for arranging children.
Warning: Mobile only. You can add Pressable only in mobile apps; the web builder doesn't offer it. When a mobile app's page renders in a browser, such as in a web preview, the notes below marked "On web" apply.
Tip: When to use Pressable: Make a custom-designed region clickable — wrap an image, a card, or a row of blocks so the whole thing is one tap target. Use when you want press feedback on an arbitrary layout. Not for a standard call-to-action (use Button), not for navigation (use Link), not for plain layout (use Container/Stack), not for a single icon target (use Icon Button).
Layout Properties
| Property | Type | Default | Description |
direction | "column" | "row" | column | How child blocks are arranged. |
justifyContent | "flex-start" | "center" | "flex-end" | "space-between" | flex-start | Distribution along the main axis. |
alignItems | "flex-start" | "center" | "flex-end" | "stretch" | stretch | Alignment on the cross axis. |
wrapContent | boolean | false | Wraps children to new lines when they overflow. |
reverseOrder | boolean | false | Reverses the visual order of children. |
Press Feedback (Interactions)
Property | Type | Default | Description |
|---|---|---|---|
| number 0–1 |
| Opacity while pressed (Active Opacity). 1 = no fade. |
| number 0–2 |
| Scale while pressed (Pressed Scale). Below 1 shrinks, above 1 grows. |
| color | transparent | Background color applied while pressed (Highlight Color). |
|
|
| Haptic buzz on press. Mobile only. |
| boolean |
| Android touch-ripple effect. Android only. |
| color |
| Ripple color. Appears only with Android Ripple on. |
Disabled ( | condition | — (enabled) | When true, the block stops responding to taps and long presses and is marked disabled for assistive technology. It isn't dimmed automatically. |
Android Override
Enable Override for Android to set separate press feedback values for Android without affecting iOS. When enabled, Android uses the override's opacity, scale, and highlight color in place of the base values — not layered on top.
Hit Slop (Extra Tap Area)
Extends the tappable area beyond the visible box without changing how it looks. Open Hit Slop (Extra area) and set one value for all sides (hitSlop.all), or a custom value per side (hitSlop.custom: top, right, bottom, left). There is no extra area by default. Mobile only: it has no effect on web.
Events
| Event | Trigger |
On Press | The block is tapped or clicked. |
On Long Press | The block is held down long enough to register a long press. |
Exposed State
| State key | Type | Description |
{{ id.content.blockIds }} | string[] | IDs of the child blocks it wraps, in render order. |
{{ id.appearance.direction }} | string | The configured layout direction. |
{{ id.appearance.disabled }} | boolean | Whether the block is currently disabled. |
Behavior & Gotchas
Warning: An empty Pressable disappears completely. Delete every child block and the Pressable renders nothing at all — not even an empty tap target. Unlike Container or Stack, it keeps no empty frame on the canvas.
Warning: A clickable child inside a Pressable fires both actions. On web, a click on a nested Button or Link bubbles up to the Pressable — you get two actions from one click. Avoid nesting independently interactive blocks inside a Pressable.
Note: Disabled stops taps but does not grey the block out. Setting Disabled blocks tap and long-press but does not automatically dim the block. Add your own reduced-opacity style alongside the Disabled expression.
Note: A long press swallows the tap that would follow. On Press does not also fire from the same gesture as On Long Press. Wire the two events to independent actions.
Swipeable Button
The Swipeable Button block is a slide-to-confirm control: the user drags a thumb across the track to trigger an action, the start text cross-fading into the end text as they slide. Use it for actions worth an extra ounce of intent: submitting an order, confirming a deletion, clocking in.
Warning: Mobile only. This block is not offered in the web builder. For web apps, use a Button.
Tip: When to use Swipeable Button: Confirm a consequential action on mobile with a deliberate gesture — payments, check-ins, irreversible submissions. For ordinary tap actions, use Button.
Properties
Content
| Property | Type | Default | Description |
startValue | string | Swipe To Submit | The label shown before the swipe. |
endValue | string | Submitted | The label the track cross-fades to as the user slides. |
Appearance
Property | Type | Default | Description |
|---|---|---|---|
|
|
| Track height and thumb size. |
|
| white | Color of the start/end text. |
|
| double chevron | Icon on the thumb before the swipe. |
|
| check | Icon on the thumb after a successful swipe. |
|
| white | Color of the thumb. |
|
| — | Color of the icon on the thumb. |
|
| — | Disables the control. |
Events
| Event | Trigger | Available when |
On Swipe End | The thumb is dragged past 60% of the track and released. | Always |
On Swipe Start | Listed in the inspector but never fires. | — |
Methods
| Method | Params | Effect |
Set Disabled | disabled: boolean | Disables or re-enables the control from an action flow. |
Behavior & Gotchas
Warning: On Swipe Start is offered but never fires. Actions attached to On Swipe Start will never run on any platform — put everything on On Swipe End.
Note: Success is at 60% of the track width. Once completed, the thumb stays at the end, and there is no reset method. Dragging it past 60% again fires On Swipe End again. To allow only one submission, call Set Disabled with disabled: true first in the On Swipe End actions, then run the real work. Call it with false to re-enable the control if the work fails.
Related Blocks
Block | Relationship |
|---|---|
In-flow action button for web and mobile layouts. | |
Compact icon-only button placed in the layout flow. | |
The default non-interactive container. Use Pressable to make it tappable. | |
Swipeable Stack | Swiping through a deck of cards, not confirming an action. |