Available from v3.8.2
FloatingActionButton
FloatingActionButton is a floating action button component with an icon and expandable title, positioned at the bottom edge of the screen.
Platform availability: iOS 17.0+
When to use:
- Use FloatingActionButton when you need a prominent primary action that should remain accessible while scrolling content.
- Consider using Button for standard actions that can be placed inline with other content.
- Consider using ButtonGroup when you have multiple equally important actions to display.
Import
import BackbaseDesignSystem
Visual reference
Expanded |
Collapsed |
Accessibility |
API reference
FloatingActionButton
A UIView component representing a floating action button with expandable title.
Properties
|
Property |
Type |
Description |
|---|---|---|
|
normalForegroundColor |
UIColor? |
The normalForegroundColor specifies the foreground color in enabled state. |
|
normalBackgroundColor |
UIColor? |
The normalBackgroundColor specifies the background color in enabled state. |
|
disabledForegroundColor |
UIColor? |
The disabledForegroundColor specifies the foreground color in disabled state. |
|
disabledBackgroundColor |
UIColor? |
The disabledBackgroundColor specifies the background color in disabled state. |
|
isEnabled |
Bool |
The isEnabled determines whether the button accepts interaction. Default is true. |
|
buttonAccessibilityLabel |
String? |
The buttonAccessibilityLabel specifies the VoiceOver label for the button. |
|
computedFont |
() -> UIFont |
The computedFont closure returns the font for the title label. |
|
cornerStyle |
UIButton.Configuration.CornerStyle |
The cornerStyle specifies the corner shape. Default is .capsule. |
|
imagePadding |
CGFloat |
The imagePadding specifies spacing between image and title. Default is DesignSystem.shared.spacer.xs. |
|
haptics |
Bool |
The haptics determines whether to generate haptic feedback on tap. Default is true. |
|
didTap |
(() -> Void)? |
The didTap closure is called when the button is tapped. |
|
size |
CGSize |
The size contains the current button dimensions (read-only). |
|
isEnabledAccessibilityHint |
(Bool) -> String |
The isEnabledAccessibilityHint closure returns an accessibility hint based on enabled state. |
Initializers
init(style:) Single-line title initializer.
|
Parameter |
Type |
Description |
|---|---|---|
|
style |
Style<FloatingActionButton> |
The button style. Default is DesignSystem.shared.styles.floatingActionButton. |
init(style:margins:) Multi-line title initializer with margins for accessibility scaling.
|
Parameter |
Type |
Description |
|---|---|---|
|
style |
Style<FloatingActionButton> |
The button style. Default is DesignSystem.shared.styles.floatingActionButton. |
|
margins |
Margins |
Leading and trailing margins for size calculation. |
Methods
setTitle(_:completion:) Sets the title of the button.
|
Parameter |
Type |
Description |
|---|---|---|
|
title |
String? |
The title to set. |
|
completion |
(() -> Void)? |
Called after animation completes. |
setImage(_:) Sets the image of the button.
|
Parameter |
Type |
Description |
|---|---|---|
|
image |
UIImage? |
The image to set. |
expand(completion:) Expands the button to show the title.
|
Parameter |
Type |
Description |
|---|---|---|
|
completion |
(() -> Void)? |
Called after animation completes. |
collapse(completion:) Collapses the button to show only the icon.
|
Parameter |
Type |
Description |
|---|---|---|
|
completion |
(() -> Void)? |
Called after animation completes. |
FloatingActionButton.Margins
|
Property |
Type |
Description |
|---|---|---|
|
leading |
CGFloat |
The leading specifies the margin from the leading screen edge. |
|
trailing |
CGFloat |
The trailing specifies the margin from the trailing screen edge. |
Usage
Basic usage
let floatingActionButton = FloatingActionButton()
floatingActionButton.setTitle("Add Item")
floatingActionButton.setImage(UIImage(systemName: "plus"))
floatingActionButton.didTap = {
print("FAB tapped")
}
view.addSubview(floatingActionButton)
NSLayoutConstraint.activate([
floatingActionButton.trailingAnchor.constraint(
equalTo: view.safeAreaLayoutGuide.trailingAnchor,
constant: -16
),
floatingActionButton.bottomAnchor.constraint(
equalTo: view.safeAreaLayoutGuide.bottomAnchor,
constant: -16
)
])
With margins for long titles
let margins = FloatingActionButton.Margins(leading: 16, trailing: 16)
let floatingActionButton = FloatingActionButton(margins: margins)
floatingActionButton.setTitle("Create New Transaction")
floatingActionButton.setImage(UIImage(systemName: "plus"))
Scroll-responsive expand/collapse
class ViewController: UIViewController, UIScrollViewDelegate {
let floatingActionButton = FloatingActionButton()
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let offset = scrollView.contentOffset.y + view.safeAreaInsets.top
if offset > floatingActionButton.size.height {
floatingActionButton.collapse {
self.view.layoutIfNeeded()
}
} else {
floatingActionButton.expand {
self.view.layoutIfNeeded()
}
}
}
}
Custom accessibility label
let floatingActionButton = FloatingActionButton()
floatingActionButton.buttonAccessibilityLabel = "Add new item to list"
Disabled state
let floatingActionButton = FloatingActionButton()
floatingActionButton.isEnabled = false
Custom colors
let floatingActionButton = FloatingActionButton()
floatingActionButton.normalForegroundColor = .white
floatingActionButton.normalBackgroundColor = .systemBlue
floatingActionButton.disabledForegroundColor = .gray
floatingActionButton.disabledBackgroundColor = .lightGray
Without haptic feedback
let floatingActionButton = FloatingActionButton()
floatingActionButton.haptics = false
States and variants
The FloatingActionButton supports the following states:
|
State |
Property |
Description |
|---|---|---|
|
Enabled |
isEnabled = true |
Button is interactive with normal colors |
|
Disabled |
isEnabled = false |
Button is non-interactive with disabled colors |
|
Expanded |
After expand() |
Shows icon and title |
|
Collapsed |
After collapse() |
Shows icon only |
Customization
Styling
|
Style |
Description |
|---|---|
|
DesignSystem.shared.styles.floatingActionButton |
Default FAB style |
Styling properties
|
Property |
Description |
|---|---|
|
normalForegroundColor |
Foreground color in enabled state. |
|
normalBackgroundColor |
Background color in enabled state. |
|
disabledForegroundColor |
Foreground color in disabled state. |
|
disabledBackgroundColor |
Background color in disabled state. |
|
isEnabled |
Button enabled state. |
|
computedFont |
Font for the title label. |
|
cornerStyle |
Corner style (default is capsule). |
|
imagePadding |
Padding between image and title. |
Events
|
Event |
Type |
Description |
|---|---|---|
|
didTap |
(() -> Void)? |
Called when the button is tapped. |
Accessibility
The FloatingActionButton component has built-in accessibility support with configurable labels and hints.
|
Configuration |
Description |
|---|---|
|
buttonAccessibilityLabel |
Custom VoiceOver label for the button |
|
isEnabledAccessibilityHint |
Closure returning hint based on enabled state |
Best practices:
- Set a meaningful buttonAccessibilityLabel that describes the action
- Configure isEnabledAccessibilityHint to communicate button state
Localizable strings
Override these strings to customize accessibility text:
"DesignSystem.floatingActionButton.accessibility.enabled" = "Enabled";
"DesignSystem.floatingActionButton.accessibility.notEnabled" = "Not enabled";
Custom accessibility configuration
floatingActionButton.buttonAccessibilityLabel = "Create new item"
floatingActionButton.isEnabledAccessibilityHint = { isEnabled in
return isEnabled ? "Double tap to create" : "Button is disabled"
}
Dependencies
- External dependencies: None
- Internal dependencies: DesignSystem styles and tokens
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
Tokens are defined in defaultTokens.json, which is integrated in the bundle of the framework, and can be customized by providing your own theme JSON file.
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Default Background |
theme.color.floating-action-button.default.background |
{theme.color.button.primary.default.background} |
|
Default Foreground |
theme.color.floating-action-button.default.foreground |
{theme.color.button.primary.default.foreground} |
|
Pressed Background |
theme.color.floating-action-button.pressed.background |
{theme.color.button.primary.pressed.background} |
|
Pressed Foreground |
theme.color.floating-action-button.pressed.foreground |
{theme.color.button.primary.pressed.foreground} |
|
Corner Radius |
theme.radius.floating-action-button.default |
99 |
|
Height |
theme.height.floating-action-button.default |
44 |
|
Padding X |
theme.padding-x.floating-action-button.default |
16 |
|
Border Width |
theme.border-width.floating-action-button.default |
1 |
Semantic tokens
These tokens are accessed via the public DesignSystem.shared API.
|
Token |
API Reference |
Description |
|---|---|---|
|
Colors |
Theme.colors.primary.default |
Primary background color |
|
Colors |
Theme.colors.surfaceDisabled.default |
Disabled background color |
|
Typography |
Via computedFont property |
Button text font |
|
Spacing |
DesignSystem.shared.spacer.xs |
Image padding |
|
Styles |
DesignSystem.shared.styles.floatingActionButton |
Default FAB style |
See also
- Button - Standard button component
- ButtonGroup - Group of buttons with layout options