> For the complete documentation index, see [llms.txt](https://swift-packages.gitbook.io/materialuikit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://swift-packages.gitbook.io/materialuikit/components/fab.md).
# FAB
Represents a Material UI styled floating action button for primary actions.
### Overview
Displays a Material UI style floating action button (FAB) at the bottom trailing edge of the screen. Use this to provide prominent action buttons in your app.
To use, apply the `floatingActionButton` modifier to any view, specifying the system image, title, and action. Optionally, set a custom corner radius.
### Modifers
Presents a FAB with a system symbol and title.
```swift
floatingActionButton(
systemImage: String,
titleKey: String,
action: @escaping () -> Void
)
```
Presents a FAB with a system symbol and title, with a customizable corner radius.
```swift
floatingActionButton(
systemImage: String,
titleKey: String,
cornerRadius: CGFloat,
action: @escaping () -> Void
)
```
### Parameters
Parameter
Description
systemImage
The system symbol name for the button icon.
titleKey
The title key displayed on the button.
cornerRadius
The corner radius to apply to the button.
action
A closure to be executed when the button is tapped.
### Example
Displays a floating action button with a system icon and title.
```swift
var body: some View {
Container {
Text("Hello, World!")
}
.floatingActionButton(systemImage: "message.fill", titleKey: "New Chat") {
print("FAB tapped!")
}
}
```
Displays a floating action button with a system icon, title, and a customizable corner radius.
```swift
var body: some View {
Container {
Text("Hello, World!")
}
.floatingActionButton(systemImage: "message.fill", titleKey: "New Chat", cornerRadius: 10) {
print("FAB tapped!")
}
}
```
