> For the complete documentation index, see [llms.txt](https://vue-generators.gitbook.io/vue-generators/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vue-generators.gitbook.io/vue-generators/fields/field_properties/inside_buttons.md).

# Inside Buttons

You can also add buttons to fields.

![Buttons screenshot](/files/-LThHnBhL9GtTv6lWF-i)

## Properties

| Property | Default  | Accepted values          | Description                                                    |
| -------- | -------- | ------------------------ | -------------------------------------------------------------- |
| classes  | *none*   | `String`                 | CSS classes for the button                                     |
| label    | *none*   | `String`                 | Caption of the button                                          |
| onclick  | *none*   | `Function(model, field)` | Triggered when click on the button                             |
| type     | "button" | `String`                 | The HTML "type" attribute for the button, defaults to "button" |

## Example

The below example uses two buttons to read the location of the user and clear the location value.

```javascript
{
  type: "input",
  inputType: "text",
  label: "Location",
  model: "address.geo",
  buttons: [
      {
          classes: "btn-location",
          label: "Current location",
          onclick: function(model) {
              if (navigator.geolocation) {
                  navigator.geolocation.getCurrentPosition(function(pos) {
                    model.address.geo = {
                      lat: pos.coords.latitude.toFixed(5),
                      lng: pos.coords.longitude.toFixed(5)
                    };
                  });
              } else {
                  alert("Geolocation is not supported by this browser.");
              }
          }
      },
      {
          classes: "btn-clear",
          label: "Clear",
          type: "reset"
          onclick: function(model, field) {
              model.address.geo = {
                  lat: 0,
                  lng: 0
              };
          }
      }
  ]
}
```