# How to use ODS Stencil components

## Use the component

### In the view

```html
<osds-button>
  My Button
</osds-button>
```

### Handle component loading

```javascript
async function doAction() {
  await customElements.whenDefined('osds-button');

  // Do something
}
```

OR

```javascript
Promise.all([
  customElements.whenDefined('osds-button')
]).then(() => {
  // Do something
});
```

### Find the instance of a component

via javascript:

```html
<script>
  const myButton = document.querySelector('osds-button');
</script>
```

### React to component events

```js
myButton.addEventListener('odsValueChanged', (event) => {
  // Do something
})
```