> ## 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.

# IconButton

> Documentation for IconButton

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

export const iconButtonPreviewJson = {
  "type": "iconButton",
  "iconSize": 24,
  "padding": {
    "left": 8,
    "top": 8,
    "right": 8,
    "bottom": 8
  },
  "alignment": "center",
  "splashRadius": 20,
  "color": "#000000",
  "focusColor": "#FFC107",
  "hoverColor": "#FF9800",
  "highlightColor": "#FF5722",
  "splashColor": "#FFEB3B",
  "disabledColor": "#BDBDBD",
  "onPressed": {},
  "autofocus": false,
  "tooltip": "Add Item",
  "enableFeedback": true,
  "constraints": {
    "minWidth": 48,
    "minHeight": 48
  },
  "style": {
    "backgroundColor": "#FFC107",
    "foregroundColor": "#000000",
    "shape": {
      "type": "roundedRectangleBorder",
      "borderRadius": 8
    }
  },
  "isSelected": false,
  "selectedIcon": {
    "type": "icon",
    "icon": "check"
  },
  "icon": {
    "type": "icon",
    "icon": "add"
  }
};
export const iconButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property       | Type                 | Description                                                                        |
| -------------- | -------------------- | ---------------------------------------------------------------------------------- |
| iconSize       | `double`             | The size of the icon inside the button.                                            |
| padding        | `StacEdgeInsets`     | The padding inside the button.                                                     |
| alignment      | `StacAlignment`      | How the icon should be aligned within the button.                                  |
| splashRadius   | `double`             | The radius of the splash effect.                                                   |
| color          | `StacColor`          | The color to paint the 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.                  |
| highlightColor | `StacColor`          | The color to paint the button when it is pressed.                                  |
| splashColor    | `StacColor`          | The color to paint the splash effect when the button is pressed.                   |
| disabledColor  | `StacColor`          | The color to paint the icon when the button is disabled.                           |
| onPressed      | `StacAction`         | The callback that is called when the button is tapped.                             |
| autofocus      | `bool`               | Whether the button should be focused when the page is loaded. Defaults to `false`. |
| tooltip        | `String`             | The text to display when the user long-presses the button.                         |
| enableFeedback | `bool`               | Whether to provide acoustic and/or haptic feedback.                                |
| constraints    | `StacBoxConstraints` | The constraints for the button.                                                    |
| style          | `StacButtonStyle`    | The style to apply to the button.                                                  |
| isSelected     | `bool`               | Whether the button is selected.                                                    |
| selectedIcon   | `StacWidget`         | The icon to display when the button is selected.                                   |
| icon           | `StacWidget`         | The icon to display inside the button.                                             |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacIconButton(
      iconSize: 24.0,
      padding: StacEdgeInsets(left: 8.0, top: 8.0, right: 8.0, bottom: 8.0),
      alignment: StacAlignment.center,
      splashRadius: 20.0,
      color: StacColors.black,
      focusColor: StacColors.amber,
      hoverColor: '#FF9800',
      highlightColor: '#FF5722',
      splashColor: '#FFEB3B',
      disabledColor: '#BDBDBD',
      onPressed: StacNoneAction(),
      autofocus: false,
      tooltip: 'Add Item',
      enableFeedback: true,
      constraints: StacBoxConstraints(minWidth: 48.0, minHeight: 48.0),
      style: StacButtonStyle(
        backgroundColor: StacColors.amber,
        foregroundColor: StacColors.black,
        shape: StacRoundedRectangleBorder(borderRadius: 8),
      ),
      isSelected: false,
      selectedIcon: StacIcon(icon: 'check'),
      icon: StacIcon(icon: 'add'),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "iconButton",
      "iconSize": 24,
      "padding": {
        "left": 8,
        "top": 8,
        "right": 8,
        "bottom": 8
      },
      "alignment": "center",
      "splashRadius": 20,
      "color": "#000000",
      "focusColor": "#FFC107",
      "hoverColor": "#FF9800",
      "highlightColor": "#FF5722",
      "splashColor": "#FFEB3B",
      "disabledColor": "#BDBDBD",
      "onPressed": {},
      "autofocus": false,
      "tooltip": "Add Item",
      "enableFeedback": true,
      "constraints": {
        "minWidth": 48,
        "minHeight": 48
      },
      "style": {
        "backgroundColor": "#FFC107",
        "foregroundColor": "#000000",
        "shape": {
          "type": "roundedRectangleBorder",
          "borderRadius": 8
        }
      },
      "isSelected": false,
      "selectedIcon": {
        "type": "icon",
        "icon": "check"
      },
      "icon": {
        "type": "icon",
        "icon": "add"
      }
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={iconButtonPreviewSrc}
        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: iconButtonPreviewJson
      };

      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>