Floating Action Bar

A “Floating Action Bar” is a floating toolbar designed to support the user’s main end action. It typically appears anchored near the bottom of the screen and provides quick access to confirm or continue, often summarising selections or totals.

Usage

A Floating Action Bar supports key end actions without interrupting the user flow. It stays anchored while allowing interaction with the rest of the page, and should be used to surface high-priority choices or summaries.

Principles

Anchored

Always stays visible when the user needs to make a final choice or review key information.

Non-blocking

Supports actions without interrupting the user's flow or hiding the rest of the interface.

Primary action

Drive users to a primary action (e.g. confirm, buy, continue).

When to use a "FAB"

Use a floating action bar when users need to confirm or complete a key action without interrupting the rest of the interface. It’s best suited for flows like placing a bet or adding items to a cart.

FAB types

The FAB is composable – the only required element is a primary action; all other content is optional and based on product needs.

With supportive action

Used for shorter flows where a secondary action is helpful. Great for reviewing and confirming selections.

With content slot and primary action

Adds contextual information while maintaining a single, focused action. Useful for informed decisions.

With supportive action, content slot and primary action

Used when a summary action is needed — commonly for carts or pooled selections — with space for additional, product-specific content in the content slot.

Status, in progress with

When a certain amount need to be reached before a action can be done, the progress is shown.

Formatting

Anatomy

FAB contain one required element and several optional elements.

Mobile and Desktop.

A – Container
B – Supportive action (optional)
C – Content slot (optional)
D – Primary action

Anatomy measurements

Padding is adapted across screen sizes — more compact on smaller devices, and more spacious on larger screens to support clarity and visual balance. The call-to-action uses a fixed width to accommodate longer labels, such as specific sum amounts. See examples below. 160 px for mobile and 240 px for desktop.

Content slot

How to use the content slot.

The content slot is designed to meet the specific needs of your product — but that doesn't mean it's a space for anything. Use it purposefully and in line with the component's intended structure and behavior.

Heres some examples on how to apply it consistently.

This is visual examples to show you how you can create with the content slot. The button can either be set to fill container or hug content.

Best practices

The FAB is composable – the only required element is a primary action; all other content is optional and based on product needs.

Balance primary and supportive content. Keep the intention clear and concise. Use a clear hierarchy of actions and elements to guide the user effectively.

Don't make the FAB too complex. Avoid too many calls to action. Multiple CTAs reduce clarity and create friction in the decision-making process.

Supportive elements should reinforce — not compete with — the main action.

Avoid surrounding the CTA with elements that steal attention or disrupt hierarchy.

Behavior

FAB contrast behaviour

To maintain clarity and strong visual hierarchy, the Floating Action Bar (FAB) adapts its style based on the background:

• Vibrant background → Light - FAB Use a light FAB on vibrant or colored surfaces to ensure contrast and visibility.
• Light background → Vibrant - FAB On light or neutral backgrounds, the vibrant FAB stands out as a clear primary action surface.
• Light background → Light FAB - In some cases, a light FAB may be preferred when less visual attention is needed. Always verify contrast ratios to ensure accessibility.

This contrast-driven logic ensures the FAB remains noticeable without overwhelming the surrounding interface.

An example of a FAB interaction flow

These examples show how the Floating Action Bar (FAB) supports intuitive purchase flows by triggering key actions in context. The FAB surfaces next steps and provides access to purchase confirmations without disrupting the user experience.

FAB with cart features

A — Tapping the supportive action opens a bottom sheet with a summary of selected rows for review.

B — Tapping the primary action opens the purchase flow in a bottom sheet, allowing the user to complete the transaction seamlessly.

Badge displaying total items in cart

The supportive action feature provides an option to show the total item count in the cart status through a badge.

Example of a sports game product

A — Tapping the supportive action opens a bottom sheet with a summary of selected rows for review.

B — The user proceeds to the purchase flow by tapping the primary action, which triggers a bottom sheet for a focused, uninterrupted experience.

Larger screens

Larger screens provide more space for FABs, but the width should not exceed 50% unless required by complex use cases. On desktop, FAB content is laid out horizontally to optimize space and maintain clarity.

Large screen 50% width FAB

Use a 50% width FAB to keep focus and avoid crowding on large screens. Ideal for standard flows with limited actions.

Large screen FAB triggers a side sheet

On large screens, FAB actions open a side sheet to support extended interactions and task completion without disrupting the layout.

Accessibility

Logical tab order

FAB should be reachable via keyboard and maintain a logical tab order. All content inside the FAB must meet WCAG AA contrast guidelines.