## Instructions
### 1. Add the StatusFlow Button element

Drag the **StatusFlow Button** element onto your native mobile screen.

Recommended size:

```text
Width: 300 - 360px
Height: 64px
```

Recommended button height:

```text
button_height = 58
```

---

### 2. Set the button labels

You can customize the button labels:

```text
label = Continue
success_label = Success
error_label = Try again
loading_label = optional
```

If `loading_label` is empty, the button will only show the spinner during loading.

---

### 3. Set the button colors

Example:

```text
background_color = #111111
loading_color = #111111
success_color = #16A34A
error_color = #DC2626
text_color = #FFFFFF
```

---

### 4. Use the button pressed event

Create a workflow:

```text
When StatusFlow Button's button_pressed
→ Run your action
```

Example actions:

```text
Create a thing
Make an API call
Process payment
Save form data
Submit booking
```

The button automatically enters the loading state when pressed.

---

### 5. Show success

After your workflow succeeds, add the plugin action:

```text
StatusFlow Button → Set Success
```

Optional fields:

```text
delay_milliseconds = 800
auto_reset = yes
reset_after_milliseconds = 2000
```

Example flow:

```text
button_pressed
→ Create a thing
→ Set Success
```

---

### 6. Show error

If your workflow fails, add the plugin action:

```text
StatusFlow Button → Set Error
```

Optional fields:

```text
delay_milliseconds = 800
auto_reset = yes
reset_after_milliseconds = 2000
```

Example flow:

```text
button_pressed
→ Run API call
→ Only when API result is empty
→ Set Error
```

---

### 7. Reset manually

Use the reset action when you want to return the button to idle:

```text
StatusFlow Button → Reset
```

Optional field:

```text
delay_milliseconds = 1000
```

---

## Example Workflow

```text
When StatusFlow Button's button_pressed

Step 1:
Create a new thing

Step 2:
StatusFlow Button → Set Success
Only when Result of step 1 is not empty
delay_milliseconds = 800
auto_reset = yes
reset_after_milliseconds = 2000

Step 3:
StatusFlow Button → Set Error
Only when Result of step 1 is empty
delay_milliseconds = 800
auto_reset = yes
reset_after_milliseconds = 2000
```

This creates the flow:

```text
Idle → Loading → Success/Error → Reset
```

---

## Notes

If `auto_reset` is set to **no**, the button will stay in the success or error state until you manually run the **Reset** action.

If `disable_after_success` is set to **yes**, the button cannot be pressed again after success.

If `disable_after_error` is set to **yes**, the button cannot be pressed again after error.

Use the **Reset** action to make the button clickable again.