> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# FloatingActionButton

> Documentation for FloatingActionButton

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const floatingActionButtonPreviewJson = {
  "type": "floatingActionButton",
  "onPressed": {},
  "textStyle": {
    "fontSize": 16,
    "color": "#FFFFFF"
  },
  "buttonType": "small",
  "autofocus": false,
  "icon": {
    "type": "icon",
    "icon": "add"
  },
  "backgroundColor": "#FFC107",
  "foregroundColor": "#000000",
  "focusColor": "#FF5722",
  "hoverColor": "#FF9800",
  "splashColor": "#FFEB3B",
  "extendedTextStyle": {
    "fontSize": 14,
    "color": "#FFFFFF"
  },
  "elevation": 6,
  "focusElevation": 8,
  "hoverElevation": 10,
  "disabledElevation": 2,
  "highlightElevation": 12,
  "extendedIconLabelSpacing": 8,
  "enableFeedback": true,
  "tooltip": "Add Item",
  "heroTag": "fab1",
  "child": {
    "type": "text",
    "data": "Add"
  }
};
export const floatingActionButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac Floating Action Button allows you to build a Flutter floating action button widget using JSON.
To know more about the floating action button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/FloatingActionButton-class.html).

## Properties

| Property                 | Type                           | Description                                                                           |
| ------------------------ | ------------------------------ | ------------------------------------------------------------------------------------- |
| onPressed                | `StacAction`                   | The callback that is called when the button is tapped.                                |
| textStyle                | `StacTextStyle`                | The text style to apply to the button's label.                                        |
| buttonType               | `StacFloatingActionButtonType` | The type of the floating action button. Defaults to `FloatingActionButtonType.small`. |
| autofocus                | `bool`                         | Whether the button should be focused when the page is loaded. Defaults to `false`.    |
| icon                     | `StacWidget`                   | The icon to display inside the button.                                                |
| backgroundColor          | `StacColor`                    | The color to paint the button.                                                        |
| foregroundColor          | `StacColor`                    | The color to paint the button's icon.                                                 |
| focusColor               | `StacColor`                    | The color to paint the button when it has the input focus.                            |
| hoverColor               | `StacColor`                    | The color to paint the button when a pointer is hovering over it.                     |
| splashColor              | `StacColor`                    | The color to paint the splash effect when the button is pressed.                      |
| extendedTextStyle        | `StacTextStyle`                | The text style to apply to the extended button's label.                               |
| elevation                | `double`                       | The elevation of the button.                                                          |
| focusElevation           | `double`                       | The elevation of the button when it has the input focus.                              |
| hoverElevation           | `double`                       | The elevation of the button when a pointer is hovering over it.                       |
| disabledElevation        | `double`                       | The elevation of the button when it is disabled.                                      |
| highlightElevation       | `double`                       | The elevation of the button when it is pressed.                                       |
| extendedIconLabelSpacing | `double`                       | The spacing between the icon and label in the extended button.                        |
| enableFeedback           | `bool`                         | Whether to provide acoustic and/or haptic feedback.                                   |
| tooltip                  | `String`                       | The text to display when the user long-presses the button.                            |
| heroTag                  | `String`                       | The tag to use for the hero animation.                                                |
| child                    | `StacWidget`                   | The widget to display inside the button.                                              |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacFloatingActionButton(
      onPressed: StacNoneAction(),
      textStyle: StacTextStyle(fontSize: 16, color: StacColors.white),
      buttonType: StacFloatingActionButtonType.small,
      autofocus: false,
      icon: StacIcon(icon: 'add'),
      backgroundColor: StacColors.amber,
      foregroundColor: StacColors.black,
      focusColor: '#FF5722',
      hoverColor: '#FF9800',
      splashColor: '#FFEB3B',
      extendedTextStyle: StacTextStyle(fontSize: 14, color: StacColors.white),
      elevation: 6.0,
      focusElevation: 8.0,
      hoverElevation: 10.0,
      disabledElevation: 2.0,
      highlightElevation: 12.0,
      extendedIconLabelSpacing: 8.0,
      enableFeedback: true,
      tooltip: 'Add Item',
      heroTag: 'fab1',
      child: StacText(data: 'Add'),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "floatingActionButton",
      "onPressed": {},
      "textStyle": {
        "fontSize": 16,
        "color": "#FFFFFF"
      },
      "buttonType": "small",
      "autofocus": false,
      "icon": {
        "type": "icon",
        "icon": "add"
      },
      "backgroundColor": "#FFC107",
      "foregroundColor": "#000000",
      "focusColor": "#FF5722",
      "hoverColor": "#FF9800",
      "splashColor": "#FFEB3B",
      "extendedTextStyle": {
        "fontSize": 14,
        "color": "#FFFFFF"
      },
      "elevation": 6,
      "focusElevation": 8,
      "hoverElevation": 10,
      "disabledElevation": 2,
      "highlightElevation": 12,
      "extendedIconLabelSpacing": 8,
      "enableFeedback": true,
      "tooltip": "Add Item",
      "heroTag": "fab1",
      "child": {
        "type": "text",
        "data": "Add"
      }
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={floatingActionButtonPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: floatingActionButtonPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>