# Share Button Component

# Share Button

## Summary
The `<frak-button-share>` component opens a modal in the Frak Wallet interface with configurable steps, allowing for complex user interactions such as login, opening session and share.

## Requirements
- An initialized `FrakSetup` configuration object

More information about the [FrakSetup](/developers/components/frak-setup) object.

### Parameters

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `text` | `string` | `"Share and earn!"` | Text to display on the button. Include the `{REWARD}` placeholder to opt into the live reward flow (the SDK substitutes the estimated reward amount). |
| `classname` | `string` | — | CSS class names applied to the button. |
| `placement` | `string` | — | Placement ID for [backend-driven configuration](/developers/concepts/placements). |
| `clickAction` | `"embedded-wallet"` \| `"sharing-page"` | `"sharing-page"` | Which UI to open when the button is clicked. Legacy values like `"share-modal"` are accepted at runtime and routed to the sharing page. |
| `noRewardText` | `string` | — | Fallback text used when `text` contains `{REWARD}` but no reward is available. |
| `targetInteraction` | `string` | — | Target interaction type used to calculate the displayed reward. |
| `preview` | `string` | — | Render in preview mode (e.g. Shopify/WordPress theme editor): the button stays visually enabled and the click handler is a no-op. |

## Usage Examples

### Basic Share Button

```html
<frak-button-share></frak-button-share>
```

### With Custom Text

```html
<frak-button-share text="Share and earn!"></frak-button-share>
```

### With Custom Class

```html
<frak-button-share classname="button button-primary"></frak-button-share>
```

### With Reward Display

Include the `{REWARD}` placeholder in `text` to display the live estimated reward. Provide `noRewardText` as a fallback for when no reward is available.

```html
<frak-button-share
    text="Share and earn up to {REWARD}!"
    noRewardText="Share and earn!"
></frak-button-share>
```

### With Click Action

Control which UI opens when the button is clicked:

```html
<!-- Opens a full sharing page (default) -->
<frak-button-share clickAction="sharing-page"></frak-button-share>

<!-- Opens the embedded wallet panel -->
<frak-button-share clickAction="embedded-wallet"></frak-button-share>
```

### With Placement

```html
<frak-button-share placement="homepage"></frak-button-share>
```

Button text, click action, and styling are resolved from the [placement configuration](/developers/concepts/placements) set in the business dashboard. HTML attributes override placement settings.

## CSS

CSS can be used to style the button.

Some default styles are applied to the button, but they can be overridden with custom CSS.

Target the component using the `frak-button-share .override` selector.

```css
frak-button-share .override {
  background-color: #000;
  color: #fff;
}
```

Component-specific CSS can also be configured via [placements](/developers/concepts/placements) in the business dashboard.