> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/webcomponents/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/webcomponents/binding-attributes.md).

# 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.