---
title: FloatingActionButton (FAB)
description: FloatingActionButton API.
---

import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';

<CodeSnippetMD imagePath="" noScreenShot scale="3" imageWidth="300" imageHeight="200" imageAlt="">
```slint
import { FloatingActionButton, FABStyle } from "@material";
export component Example inherits Window {
    width: 120px;
    height: 120px;
    background: transparent;
    FloatingActionButton {
        icon: @image-url("../icons/add.svg");
        tooltip: "Add";
        style: FABStyle.standard;
    }
}
```
</CodeSnippetMD>

A `FloatingActionButton` (FAB) is a circular button that floats above the UI and is used for a primary action.

## Properties

### icon
<SlintProperty propName="icon" typeName="image">
The icon image displayed on the button.
</SlintProperty>

### style
<SlintProperty propName="style" typeName="enum" enumName="FABStyle">
The style of the FAB: `small`, `standard`, or `large`.
</SlintProperty>

### text
<SlintProperty propName="text" typeName="string">
An optional text label for the button.
</SlintProperty>

### tooltip
<SlintProperty propName="tooltip" typeName="string">
A tooltip text that appears when hovering over the button.
</SlintProperty>

## Callbacks

### clicked()
Invoked when the button is clicked.
