# Button

This page showcases various buttons you can implement in your app, each designed for specific actions. Below is a detailed explanation of the different button types, their configurations, and their intended actions.

{% hint style="info" %}
To see buttons in action, check out [examples](https://app.fmbetterforms.com/#/apps/pages/edit?id=5251675D-4A4D-4FE1-AD35-5D5B038CA924) on this [page](https://examplesdev.fmbetterforms.com/#/form/5251675D-4A4D-4FE1-AD35-5D5B038CA924).
{% endhint %}

### Regular Buttons

The general structure of a button object is as follows:

```json
{
  "actions": [],
  "buttonClasses": "btn btn-info",
  "styleClasses": "col-md-2",
  "text": "Push Me",
  "type": "button"
}
```

To assign actions to a button, you can populate the <mark style="color:red;">`actions`</mark> array. Below are examples of common button actions.

#### **Open a Modal**

```json
{
    "actions": [{
        "action": "showModal",
        "options": {
            "body": "This is the modal body, actions are Kewl!",
            "icon": "success",
            "title": "<br>You triggered a modal!"
        }
    }],
    "buttonClasses": "btn btn-info btn-lg",
    "icon": "fa fa-comment",
    "styleClasses": "col-md-2",
    "text": "Show a Modal",
    "type": "button"
}
```

#### **Redirect to a Path**

* **Internal Link**

  ```json
  {
      "actions": [{
          "action": "path",
          "options": {
              "path": "/dash"
          }
      }],
      "buttonClasses": "btn btn-info",
      "hint": "This redirects the user to another form",
      "styleClasses": "col-md-2",
      "text": "Goto dash",
      "type": "button"
  }
  ```
* **External Link**

  ```json
  {
      "actions": [{
          "action": "path",
          "options": {
              "url": "https://docs.fmbetterforms.com/"
          }
      }],
      "buttonClasses": "btn btn-danger btn-xl btn-trans btn-pill",
      "hint": "Styled with CSS, opens a new tab",
      "styleClasses": "col-md-2",
      "text": "Show Documentation",
      "type": "button"
  }
  ```

#### **Show Alert**

```json
{
    "actions": [{
        "action": "showAlert",
        "options": {
            "text": "This is the Alert body, actions are Kewl!",
            "title": "Hello World!",
            "type": "error"
        }
    }],
    "buttonClasses": "btn btn-primary btn-block",
    "hint": "Fills the column it defines",
    "icon": "fa fa-triangle-exclamation",
    "styleClasses": "col-md-4",
    "text": "Full Width showAlert",
    "type": "button"
}
```

#### JavaScript Function

The Print button action executes JavaScript functions:

```json
{
    "actions": [{
        "action": "function",
        "function": "window.print()",
        "options": {}
    }],
    "buttonClasses": "btn btn-success btn-trans",
    "icon": "fa fa-print",
    "styleClasses": "col-md-2",
    "text": "Print",
    "type": "button"
}
```

#### runUtilityHook

This action allows a button click to call the scoped FileMaker <mark style="color:red;">`onUtility`</mark> server hook. You can pass additional parameters in the <mark style="color:red;">`options`</mark> object:

```json
{
    "actions": [{
        "action": "runUtilityHook",
        "options": {
            "type": "save"
        }
    }],
    "buttonClasses": "btn btn-info",
    "hint": "to save...",
    "styleClasses": "col-md-2",
    "text": "Save",
    "type": "button"
}
```

#### Dropdown Buttons

Dropdown buttons contain multiple button objects within the `subs` array. Here’s an example:

```json
{
    "buttonClasses": "btn btn-info btn-trans",
    "icon": "fa fa-comment",
    "label": "Dropdown Menu",
    "styleClasses": "col-md-4",
    "subs": [{
        "actions": [],
        "text": "Button 1"
    }, {
        "divider": true
    }, {
        "actions": [],
        "text": "Button 2"
    }],
    "text": "Some Actions",
    "type": "button"
}
```

### Button Groups

Button groups use the <mark style="color:red;">`group`</mark> array to bundle related buttons together.

```json
{
    "group": [{
        "actions": [],
        "buttonClasses": "btn btn-success btn-trans",
        "icon": "fa fa-plus",
        "text": "Add",
        "type": "button"
    }, {
        "actions": [],
        "buttonClasses": "btn btn-success btn-trans",
        "icon": "fa fa-archive",
        "text": "Save",
        "type": "button"
    }],
    "groupClasses": "btn-group",
    "styleClasses": "col-md-6",
    "type": "button"
}
```

### Dynamic Styling

This button uses <mark style="color:red;">`buttonClasses_calc`</mark> to dynamically generate CSS classes. It is a computed property that combines static classes with dynamic model data:

```json
{
    "actions": [],
    "buttonClasses_calc": "'p-4 w-48 text-center border font-bold rounded-lg ' + model.buttonStyleClasses",
    "styleClasses": "col-md-3",
    "text": "Push Me",
    "type": "button"
}
```

### Button Triggering a namedActionn

This button uses the <mark style="color:red;">`onclick_actions`</mark> array to call a <mark style="color:red;">`namedAction`</mark> when clicked:

```json
{
    "buttons": [{
        "classes": "btn btn-success btn-trans",
        "label": "Do Something",
        "onclick_actions": [{
            "action": "namedAction",
            "name": "SomethingClicked",
            "options": {}
        }]
    }],
    "label": "My Input",
    "model": "field1",
    "styleClasses": "col-md-3",
    "fieldOptions": {
        "inputType": "text"
    },
    "type": "input"
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.klai.studio/reference/components-overview/common/button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.