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.

floatingActionButton(
    systemImage: String,
    titleKey: String,
    action: @escaping () -> Void
)

Presents a FAB with a system symbol and title, with a customizable corner radius.

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.

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.

var body: some View {
    Container {
        Text("Hello, World!")
    }
    .floatingActionButton(systemImage: "message.fill", titleKey: "New Chat", cornerRadius: 10) {
        print("FAB tapped!")
    }
}