# Button block — recipe

**Locked 2026-08-04 as part of a452 Phase 5.**
**Tier:** 3 (generic MIT)

## A. Product Description

A clickable interactive element displaying text and an optional icon that navigates to a specific URL. It uses a semantic anchor tag styled to look like a button.

### UI structure
A wrapper `<a>` tag (or `<button>` if `url` is empty) containing the text string and an `<svg>` icon element positioned to the left or right of the text.

### Layout
Inline-block. It aligns with the surrounding text flow and has a set width based on the `size` prop.

### Geometry
Small: 24px height.
Medium: 36px height.
Large: 48px height.

### States
Default: Standard background and text color.
Hover: Background color darkens or border thickens.
Active: Slight vertical shift and opacity change.

## B. Structural Contract

### Inputs (props)
- `props.text` (string, default: "Click here"): The label text to display.
- `props.url` (string, default: "#"): The destination link for the button.
- `props.variant` (string, default: "solid"): Style variant, options: "solid" or "outline".
- `props.size` (string, default: "md"): Height sizing, options: "sm", "md", "lg".
- `props.icon` (string/object, default: null): Icon identifier or SVG string to render inside.

### Outputs (events)
- `onClick`: Fires when the user clicks the button.

### Module boundaries
This block is self-contained. It does not rely on other FreshVibe blocks.

### Swap-test
To replace this block: replace `modules/button.js` with a file exporting the `render(props, slots)` function.

## C. Reconstruction Notes

### Evidence
The block's source code is located at `modules/button.js`. Lines 12-18 handle the variant application logic.

### Visual anchors
CSS class: `.fvcms-button` is applied to the root element.

### Behavioural anchors
The block exports a `render(props, slots)` function that returns a DOM element representing the button.

## D. Source-line citations

The original implementation is at `modules/button.js`. See the shadow at `app-pact/shadow/v0.8.0-pre-fwv-v8-alignment/modules/button.js` for the pre-alignment snapshot.