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

# ElevatedButton

> Documentation for ElevatedButton

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

export const elevatedButtonPreviewJson = {
  "type": "elevatedButton",
  "onPressed": {},
  "onLongPress": {},
  "onHover": {},
  "onFocusChange": {},
  "style": {
    "backgroundColor": "primary",
    "foregroundColor": "#FFFFFF"
  },
  "autofocus": false,
  "clipBehavior": "none",
  "child": {
    "type": "text",
    "data": "Click Me!"
  }
};
export const elevatedButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property      | Type              | Description                                                                        |
| ------------- | ----------------- | ---------------------------------------------------------------------------------- |
| onPressed     | `StacAction`      | The callback that is called when the button is tapped.                             |
| onLongPress   | `StacAction`      | The callback that is called when the button is long-pressed.                       |
| onHover       | `StacAction`      | The callback that is called when the button is hovered over.                       |
| onFocusChange | `StacAction`      | The callback that is called when the button's focus changes.                       |
| style         | `StacButtonStyle` | The style to apply to the button.                                                  |
| autofocus     | `bool`            | Whether the button should be focused when the page is loaded. Defaults to `false`. |
| clipBehavior  | `StacClip`        | Determines how the content should be clipped. Defaults to `Clip.none`.             |
| child         | `StacWidget`      | The widget to display inside the button.                                           |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacElevatedButton(
      onPressed: StacNoneAction(),
      onLongPress: StacNoneAction(),
      style: StacButtonStyle(
        backgroundColor: 'primary',
        foregroundColor: StacColors.white,
      ),
      autofocus: false,
      clipBehavior: StacClip.none,
      child: StacText(data: 'Click Me!'),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "elevatedButton",
      "onPressed": {},
      "onLongPress": {},
      "onHover": {},
      "onFocusChange": {},
      "style": {
        "backgroundColor": "primary",
        "foregroundColor": "#FFFFFF"
      },
      "autofocus": false,
      "clipBehavior": "none",
      "child": {
        "type": "text",
        "data": "Click Me!"
      }
    }
    ```
  </Tab>

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

      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>