> 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/wire-components.md).

# Wire Components

The WireBootstrap framework brings data management services into UI components standardizing how they are bound to data and their respective configurations.  WireBootstrap components are designed to be web framework agnostic.  

The example below binds [WireBootstrap's Bootstrap Buttons](https://docs.wirebootstrap.com/bootstrap/buttons) component to an HTML element with the `id` of `my-table`.

```html
<div id="buttons"></div>
```

```javascript
const config = {
    data: new wire.data.DataSet(...)
};

new wire.bsButtons().render("#buttons", config);
```

## Web Components

Any component created by WireBootstrap can be used as a web component.  For details on web component support for a WireBootstrap component created by others, visit the component documentation.

Use the `wire-component` element to render WireBootstrap components as web components.  This element has the following properties. &#x20;

| Property Name | Property Description                                                                                                                                                                                  |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| component     | The fully qualified class name of the component.                                                                                                                                                      |
| config        | The [configuration object](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration) use to bind the component.                                                             |
| data          | When only a data object is required, use this shortcut to set the [data property on a configuration object](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/data). |
|               |                                                                                                                                                                                                       |

Note, the `config` and `data` properties are [object binds](/webcomponents/objects.md) and require the `wr` prefix be added to the attribute name.

The example below is the web component version of the same example above.

```html
<wire-component component="wire.bsButtons" wr-config="config"></wire-component>
```

## Component Properties

In addition to these native properties, any configuration properties unique to a component can be set using the attributes of `wire-component`.

Rather than using a full configuration object, the following example sets the [`color` configuration property](https://docs.wirebootstrap.com/bootstrap/buttons/configuration) on the buttons to be `btn-secondary`using the `color` attribute on `wire-component`.  It also configures the data for the component using the `data` property.

```html
<wire-component 
    component="wire.bsButtons" 
    wr-data="data" 
    color="btn-secondary">
</wire-component>
```

For details on how to use WireBootstrap components in other web frameworks, visit [Web Frameworks](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/web-frameworks) in the core WireBootstrap documentation.

## Component Reference

In order to work directly with a component in JavaScript, get a reference to the component's HTML element in JavaScript.  Then use the `wrComponent` property on the element to get a reference to the internal component object.

```html
<!-- HTML -->
<wire-component id="my-button" component="wire.bsButtons"></wire-component>
```

```javascript
// JavaScript
const component = document.getElementById("my-button");

const button = component.wrComponent;
```

In TypeScript, WireBootstrap's TypeScript interfaces can be used to do the same cast.

```typescript
const component = document.getElementById("my-button") as IWireWebComponent;

const button = component.wrComponent as IWireBsButtonsComponent;
```

## Pro Pack

The [WireBootstrap Component Pro Pack](https://www-test.wirebootstrap.com/products/pro-pack.html) includes native Web Components for all of the components in the pack as well as the [standard WireBootstrap components](https://www-test.wirebootstrap.com/products/bootstrap.html).

```html
<wire-bs-buttons wr-config="config"></wire-bs-buttons>
```