# Binding Attributes

Binding attributes allow the values in properties to be used or appear in different ways inside the component's HTML markup.

The following example uses the `wr-text` attribute binding.  It will display the message property passed into the component in a `div` element.  It is the equivalent to the [same sample example that uses interpolation](/webcomponents/templates.md#properties).

```javascript
class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      message: true
    }
  }
  static get template() {
    return '<div wr-text="message"></div>';
  }
      
}
```

The following example uses an `admin` property with the `wr-hide` binding attribute to hide the `div` element if the property evaluates to `false`.

```javascript
class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      admin: true
    }
  }
  static get template() {
    return '<div wr-hide="admin"></div>';
  }
      
}
```

## Class

Use the `wr-add-class` attribute binding to add CSS classes to a component.

```javascript
class MyButton extends wire.ui.WebComponent {

  static get properties() {
    return {
      color: true
    }
  }
  static get template() {
    return '<button class="btn" wr-add-class="color"></button>';
  }
      
}
customElements.define('my-button', MyButton);
```

```html
<my-button color="btn-primary"></my-button>
```

## Events

The `wr-on*` binding sets a callback for an element's native event. &#x20;

The following example will call the `myClick` method on the web component when the button in the template is clicked.

```javascript
class MyComponent extends wire.ui.WebComponent {

  myClick(ev) => {
    // handle click event
  }

  static get template() {
    return '<button wr-on-click="myClick"></button>';
  }
      
}
```

To add parameters to the event, use the [WireBootstrap args formatter](/webcomponents/formatters.md#event-args).

```javascript
class MyComponent extends wire.ui.WebComponent {

  myClick(ev) => {
    // handle click event
  }

  static get template() {
    return '<button wr-on-click="myClick | args 'red'"></button>';
  }
      
}
```

There are many more attribute bindings are available to use.  For a list and examples of each or to learn how to create your own bindings, visit the [Tinybind bindings page](https://blikblum.github.io/tinybind/docs/reference/).

## Custom

To create your own bindings, add a function to the `tinybind.binders` object.

```javascript
tinybind.binders.color = function(el, value) {
  el.style.color = value
}
```

And then use the bindings in a template.

```html
<button wr-color="label.color">Apply</button>
```

## Objects

In the examples above, primitive static values are passed into the component using it's attributes.  Binding attributes also allow complex objects to be passed from one component to another. &#x20;

Visit [Objects](/webcomponents/objects.md) for details.


---

# 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.wirebootstrap.com/webcomponents/binding-attributes.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.