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

# Chip

> Documentation for Chip

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

export const chipPreviewJson = {
  "type": "chip",
  "avatar": {
    "type": "circleAvatar",
    "backgroundColor": "#FF0000",
    "child": {
      "type": "text",
      "data": "A"
    }
  },
  "label": {
    "type": "text",
    "data": "Chip Label"
  },
  "labelStyle": {
    "color": "#000000",
    "fontSize": 14
  },
  "labelPadding": {
    "left": 8,
    "top": 4,
    "right": 8,
    "bottom": 4
  },
  "deleteIcon": {
    "type": "icon",
    "icon": "delete"
  },
  "deleteIconColor": "#FF0000",
  "deleteButtonTooltipMessage": "Delete",
  "side": {
    "color": "#000000",
    "width": 1
  },
  "shape": {
    "type": "roundedRectangle",
    "borderRadius": 8
  },
  "clipBehavior": "antiAlias",
  "autofocus": false,
  "color": "#FFFFFF",
  "backgroundColor": "#EEEEEE",
  "padding": {
    "left": 8,
    "top": 4,
    "right": 8,
    "bottom": 4
  },
  "visualDensity": {
    "horizontal": 0,
    "vertical": 0
  },
  "materialTapTargetSize": "padded",
  "elevation": 2,
  "shadowColor": "#000000",
  "surfaceTintColor": "#FFFFFF",
  "iconTheme": {
    "color": "#000000",
    "size": 24
  },
  "avatarBoxConstraints": {
    "minWidth": 24,
    "minHeight": 24
  },
  "deleteIconBoxConstraints": {
    "minWidth": 24,
    "minHeight": 24
  }
};
export const chipPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property                   | Type                         | Description                                                                                    |
| -------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------- |
| avatar                     | `StacWidget`                 | The widget to display prior to the chip's label.                                               |
| label                      | `StacWidget`                 | The primary content of the chip.                                                               |
| labelStyle                 | `StacTextStyle`              | The style to use for the label.                                                                |
| labelPadding               | `StacEdgeInsets`             | The padding around the label.                                                                  |
| deleteIcon                 | `StacWidget`                 | The widget to display as the chip's delete icon.                                               |
| onDeleted                  | `StacAction`                 | The callback that is called when the delete icon is tapped.                                    |
| deleteIconColor            | `StacColor`                  | The color of the delete icon.                                                                  |
| deleteButtonTooltipMessage | `String`                     | The message to display in the tooltip for the delete icon.                                     |
| side                       | `StacBorderSide`             | The border to display around the chip.                                                         |
| shape                      | `StacRoundedRectangleBorder` | The shape of the chip's border.                                                                |
| clipBehavior               | `StacClip`                   | The clip behavior of the chip. Defaults to `Clip.none`.                                        |
| autofocus                  | `bool`                       | Whether this chip should focus itself if nothing else is already focused. Defaults to `false`. |
| color                      | `StacColor`                  | The color of the chip.                                                                         |
| backgroundColor            | `StacColor`                  | The background color of the chip.                                                              |
| padding                    | `StacEdgeInsets`             | The padding around the chip.                                                                   |
| visualDensity              | `StacVisualDensity`          | The visual density of the chip.                                                                |
| materialTapTargetSize      | `StacMaterialTapTargetSize`  | Configures the minimum size of the tap target.                                                 |
| elevation                  | `double`                     | The elevation of the chip.                                                                     |
| shadowColor                | `StacColor`                  | The color of the chip's shadow.                                                                |
| surfaceTintColor           | `StacColor`                  | The color of the chip's surface tint.                                                          |
| iconTheme                  | `StacIconThemeData`          | The theme for icons in the chip.                                                               |
| avatarBoxConstraints       | `StacBoxConstraints`         | The constraints for the avatar.                                                                |
| deleteIconBoxConstraints   | `StacBoxConstraints`         | The constraints for the delete icon.                                                           |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacChip(
      avatar: StacCircleAvatar(
        backgroundColor: StacColors.red,
        child: StacText(data: 'A'),
      ),
      label: StacText(data: 'Chip Label'),
      labelStyle: StacTextStyle(color: StacColors.black, fontSize: 14),
      labelPadding: StacEdgeInsets(left: 8, top: 4, right: 8, bottom: 4),
      deleteIcon: StacIcon(icon: 'delete'),
      deleteIconColor: StacColors.red,
      deleteButtonTooltipMessage: 'Delete',
      side: StacBorderSide(color: StacColors.black, width: 1.0),
      shape: StacRoundedRectangleBorder(borderRadius: 8.0),
      clipBehavior: StacClip.antiAlias,
      autofocus: false,
      color: StacColors.white,
      backgroundColor: '#EEEEEE',
      padding: StacEdgeInsets(left: 8, top: 4, right: 8, bottom: 4),
      visualDensity: StacVisualDensity(horizontal: 0.0, vertical: 0.0),
      materialTapTargetSize: StacMaterialTapTargetSize.padded,
      elevation: 2.0,
      shadowColor: StacColors.black,
      surfaceTintColor: StacColors.white,
      iconTheme: StacIconThemeData(color: StacColors.black, size: 24.0),
      avatarBoxConstraints: StacBoxConstraints(minWidth: 24.0, minHeight: 24.0),
      deleteIconBoxConstraints: StacBoxConstraints(minWidth: 24.0, minHeight: 24.0),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "chip",
      "avatar": {
        "type": "circleAvatar",
        "backgroundColor": "#FF0000",
        "child": {
          "type": "text",
          "data": "A"
        }
      },
      "label": {
        "type": "text",
        "data": "Chip Label"
      },
      "labelStyle": {
        "color": "#000000",
        "fontSize": 14
      },
      "labelPadding": {
        "left": 8,
        "top": 4,
        "right": 8,
        "bottom": 4
      },
      "deleteIcon": {
        "type": "icon",
        "icon": "delete"
      },
      "deleteIconColor": "#FF0000",
      "deleteButtonTooltipMessage": "Delete",
      "side": {
        "color": "#000000",
        "width": 1
      },
      "shape": {
        "type": "roundedRectangle",
        "borderRadius": 8
      },
      "clipBehavior": "antiAlias",
      "autofocus": false,
      "color": "#FFFFFF",
      "backgroundColor": "#EEEEEE",
      "padding": {
        "left": 8,
        "top": 4,
        "right": 8,
        "bottom": 4
      },
      "visualDensity": {
        "horizontal": 0,
        "vertical": 0
      },
      "materialTapTargetSize": "padded",
      "elevation": 2,
      "shadowColor": "#000000",
      "surfaceTintColor": "#FFFFFF",
      "iconTheme": {
        "color": "#000000",
        "size": 24
      },
      "avatarBoxConstraints": {
        "minWidth": 24,
        "minHeight": 24
      },
      "deleteIconBoxConstraints": {
        "minWidth": 24,
        "minHeight": 24
      }
    }
    ```
  </Tab>

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

      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>