Floating Action Button (FAB)
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 |
placement | "bottom-end" | "bottom-start" | "top-end" | "top-start" | bottom-end | Which corner the FAB pins to. end/start follow text direction. |
disabled | condition | — | Currently has no effect — see gotchas below. |
styles | style set | m-md | 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.
Examples
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.
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 |
interactions.opacity | number 0–1 | 1 | Opacity while pressed (Active Opacity). 1 = no fade. |
interactions.scale | number 0–2 | 0.95 | Scale while pressed. Below 1 shrinks, above 1 grows. |
interactions.highlightColor | color | transparent | Background color applied while pressed. |
interactions.hapticFeedback | "none" | "light" | "medium" | "heavy" | "selection" | none | Haptic buzz on press. Mobile only. |
interactions.androidRipple | boolean | true | Android touch-ripple effect. Android only. |
interactions.rippleColor | color | bg-quaternary | Ripple color. Appears only with Android Ripple on. |
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. Mobile only — 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.
Examples
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. Designed for mobile app output — on web it degrades to a simple click. Use it for actions worth an extra ounce of intent: submitting an order, confirming a deletion, clocking in.
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. Web-first apps should prefer Button — on web this block fires on a plain click, so the "extra intent" protection doesn't exist there.
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 |
size | "xs" | "sm" | "md" | "lg" | md | Track height and thumb size. |
labelColor | text color | white | Color of the start/end text. |
thumbStartIcon | icon | double chevron | Icon on the thumb before the swipe. |
thumbEndIcon | icon | check | Icon on the thumb after a successful swipe. |
thumbBackgroundColor | color | white | Color of the thumb. |
disabled | condition | — | Disables the control. Note web caveat below. |
Events
| Event | Trigger | Available when |
On Swipe End | Mobile: thumb dragged past 60% and released. Web: user clicks the button. | 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.
Warning: On web there is no swipe — a single click fires the action. The confirm-by-gesture protection exists only in mobile app output.
Warning: Disabling changes the look everywhere, but only blocks the gesture on mobile. On web, the click handler stays live — a disabled-looking button still fires On Swipe End when clicked.
Note: Success is at 60% of the track width. Once completed, the thumb stays at the end — the control does not reset itself for a second swipe.
Examples
Related Blocks
| Block | Relationship |
| Button | In-flow action button for web and mobile layouts. |
| Icon Button | Compact icon-only button placed in the layout flow. |
| Stack | The default non-interactive container — use Pressable to make it tappable. |
| Swipeable Stack | Swiping through a deck of cards, not confirming an action. |
Frequently Asked Questions
Can I use a Floating Action Button on a web app?
No. The Floating Action Button block is only available in native mobile apps and does not appear in the web block library. For a floating action on a web app, use a regular Button block with fixed positioning applied via custom CSS, or a Container block with the appropriate styles.
What is the difference between a Pressable block and a plain Container?
A Pressable block is a composable wrapper specifically designed for tappable areas — it provides press feedback (opacity change, scale transform, highlight color, haptic vibration on mobile, ripple animation) and fires an On Press event. A plain Container is a layout element that has no press semantics and no built-in feedback. Use Pressable anywhere you want a tappable region with visual acknowledgment. Use Container for pure layout grouping with no interaction.
How do I make the Swipeable Button require full confirmation and prevent accidental swipes?
The Swipeable Button requires the user to drag the handle past the 60% threshold of the track before the confirmation fires. You cannot adjust this threshold, but you can increase the block's width so the physical swipe distance is longer, making accidental triggers less likely. You can also add a visually prominent label (via the startValue/endValue text) to communicate the gravity of the action.
What press feedback options does Pressable support on Android?
On Android, the Pressable block supports an additional Android Ripple Override — you can set a ripple color, a ripple radius, and whether the ripple is borderless. On iOS and web, ripple is not natively available so the other feedback options (opacity, scale, highlight color) are used instead. On web, the fallback is a highlight color change.