**Button Component — LLM Reference**

`Button` renders a fully styled, clickable button optimized for email clients. It supports background colors, borders, rounded corners, and advanced text styling with strong Outlook compatibility via MSO conditional comments.

---

## Position in the Document Tree

```
DocumentTree
└── Section
    └── Container
        └── Column
            └── Text
            └── Button          ← clickable call-to-action button
            └── Spacer
```

`Button` is a leaf node. It can be placed anywhere a child component is accepted.

---

## ComponentNode JSON Structure

```json
{
  "id": "unique-string-id",
  "type": "ButtonComponent",
  "config": {
    "children": "Click Here",
    "innerLink": {
      "type": "url",
      "url": "https://example.com"
    },
    "backgroundColor": "#3b82f6",
    "color": "#ffffff",
    "padding": "12px 28px",
    "borderRadius": "6px"
  }
}
```

---

## `ButtonConfig` — Full Property Reference

| Property            | Type                                      | Required | Default     | Description |
|---------------------|-------------------------------------------|----------|-------------|-----------|
| `children`          | `string` / `ReactNode`                    | Yes      | —           | Button text content |
| `innerLink`         | `IInnerLink`                              | No       | —           | Preferred way to make button clickable |
| `href`              | `string`                                  | No       | —           | Deprecated. Use `innerLink` instead |
| `backgroundColor`   | `string`                                  | No       | —           | Button background color |
| `color`             | `string`                                  | No       | —           | Text color |
| `padding`           | `string`                                  | No       | —           | Inner padding (e.g. `"12px 24px"`) |
| `borderRadius`      | `string`                                  | No       | —           | Border radius (e.g. `"6px"`, `"9999px"`) |
| `border`            | `BorderConfig`                            | No       | —           | Border configuration |
| `width`             | `string`                                  | No       | `"auto"`    | Button width (e.g. `"200px"`, `"100%"`) |
| `maxWidth`          | `string`                                  | No       | —           | Maximum width |
| `justifyContent`    | `"start" \| "center" \| "end"`            | No       | —           | Horizontal alignment of the button |
| `textAlign`         | `"left" \| "center" \| "right"`           | No       | `"center"`  | Text alignment inside button |
| `fontSize`          | `string`                                  | No       | —           | Font size (e.g. `"16px"`) |
| `fontWeight`        | `string`                                  | No       | —           | Font weight (`"400"`, `"700"`, `"bold"`) |
| `fontStyle`         | `string`                                  | No       | —           | `"italic"` |
| `fontFamily`        | `string`                                  | No       | —           | Font family |
| `lineHeight`        | `string`                                  | No       | —           | Line height |
| `letterSpacing`     | `string`                                  | No       | —           | Letter spacing |
| `textTransform`     | `string`                                  | No       | —           | `"uppercase"`, `"capitalize"`, etc. |
| `textDecoration`    | `string`                                  | No       | —           | Text decoration |
| `opacity`           | `string \| number`                        | No       | —           | Text opacity |

---

## `innerLink` Structure

```json
"innerLink": {
  "type": "url" | "email" | "phone" | "anchor" | "page_top" | "page_bottom" | "none",
  "url"?: string,
  "email"?: string,
  "phone"?: string,
  "anchor"?: string,
  "target"?: "_blank" | "_self"
}
```

---

## How It Works

- Uses nested tables for maximum email client compatibility.
- Outlook Classic gets a separate MSO-wrapped table structure.
- Border radius and background are handled carefully for Outlook support.
- All text styling is applied via inline styles.
- The button is always rendered as a link (`<a>`) when `innerLink`/`href` is provided.

---

## React Usage

```tsx
import Button, { ButtonConfig } from './Button';

const config: ButtonConfig = {
  children: "Get Started Now",
  innerLink: {
    type: "url",
    url: "https://example.com",
    target: "_blank"
  },
  backgroundColor: "#2563eb",
  color: "#ffffff",
  padding: "14px 32px",
  borderRadius: "8px",
  fontSize: "16px",
  fontWeight: "600"
};

<Button config={config} />
```

The component is memoized via `arePropsEqual`.

---

## Common Patterns & Examples

### 1. Primary CTA Button

```json
{
  "id": "btn_primary",
  "type": "ButtonComponent",
  "config": {
    "children": "Shop Now",
    "innerLink": {
      "type": "url",
      "url": "https://example.com/shop"
    },
    "backgroundColor": "#3b82f6",
    "color": "#ffffff",
    "padding": "14px 32px",
    "borderRadius": "6px",
    "fontSize": "16px",
    "fontWeight": "600"
  }
}
```

### 2. Full-width button

```json
{
  "id": "btn_full",
  "type": "ButtonComponent",
  "config": {
    "children": "Download Free Guide",
    "innerLink": { "type": "url", "url": "https://example.com" },
    "backgroundColor": "#10b981",
    "color": "#ffffff",
    "padding": "16px 20px",
    "width": "100%",
    "borderRadius": "4px"
  }
}
```

### 3. Outline / Secondary Button

```json
{
  "id": "btn_outline",
  "type": "ButtonComponent",
  "config": {
    "children": "Learn More",
    "innerLink": { "type": "url", "url": "https://example.com" },
    "backgroundColor": "transparent",
    "color": "#1f2937",
    "padding": "12px 28px",
    "borderRadius": "6px",
    "border": {
      "width": "2px",
      "style": "solid",
      "color": "#1f2937"
    }
  }
}
```

### 4. Centered button with custom font

```json
{
  "id": "btn_centered",
  "type": "ButtonComponent",
  "config": {
    "children": "Register Today",
    "innerLink": { "type": "url", "url": "https://example.com" },
    "backgroundColor": "#7c3aed",
    "color": "#ffffff",
    "padding": "13px 36px",
    "borderRadius": "9999px",
    "fontSize": "17px",
    "fontWeight": "700",
    "justifyContent": "center"
  }
}
```

---

## Data Bindings

`Button` supports the `bindings` property on the `ComponentNode`, alongside `id`, `type`, and `config`. Leaf components do not support `dataList` or `itemAlias` — use those on a parent `Container`, `Column`, or `Row` to repeat the component. `visible` and `propertyMap` are fully supported.

```json
{
  "id": "cta-button",
  "type": "ButtonComponent",
  "bindings": {
    "visible": "offer.active === true",
    "propertyMap": {
      "config.children": "offer.ctaLabel",
      "config.backgroundColor": "offer.brandColor"
    }
  },
  "config": {
    "children": "Shop Now",
    "innerLink": { "type": "url", "url": "https://example.com" },
    "backgroundColor": "#3b82f6",
    "color": "#ffffff",
    "padding": "12px 28px",
    "borderRadius": "6px"
  }
}
```

| Property | Description |
|---|---|
| `visible` | JS expression evaluated against the Data Layer. Hides this component when falsy. |
| `propertyMap` | Maps component property paths (prefixed with `config.`) to Data Layer paths. |

> Bindable properties include `config.children` (button label), `config.backgroundColor`, `config.color`, `config.padding`, `config.borderRadius`, and any other scalar `ButtonConfig` field. `innerLink` itself cannot be bound via `propertyMap` — use a parent Container's `dataList` to repeat buttons with different links.

---

## Rules & Constraints

- `children` (button text) is **required**.
- Prefer `innerLink` over the deprecated `href`.
- Always specify `backgroundColor` for best Outlook compatibility.
- Use `justifyContent` to align the button inside its parent container.
- **Button alignment is self-contained.** Even when a parent `ColumnComponent` has `alignItems: "center"`, the button will render left-aligned by default. Always set `justifyContent: "center"` (or `"start"` / `"end"`) directly on the `ButtonComponent` config to control its horizontal alignment explicitly.
- `padding` controls the internal spacing of the button.
- For rounded buttons with background, `borderRadius` works reliably across most clients.