Basic usage

Add components and connect their properties, state, and events to your application.

Add a component#

The installation guide connects a bundle that automatically registers its included custom elements. Add tags to the page as you would with standard HTML elements.

HTML

<div class="sy-theme sy-theme-light">
  <sy-button id="save-button" variant="primary">Save</sy-button>
</div>

Properties and state#

Set string attributes in HTML. For Button, boolean attributes such as disabled, loading can be enabled by adding the attribute without a value.

HTML

<sy-button variant="primary" size="large">Save</sy-button>
<sy-button disabled>Unavailable</sy-button>
<sy-button variant="primary" loading>Saving</sy-button>

Remove the attribute to disable the state. In JavaScript, set it to button.disabled = false or button.loading = false as needed.

Connect events#

Handle a regular Button action through the standard click event. Wait for registration to complete before accessing component properties or methods.

JavaScript

await customElements.whenDefined('sy-button');

const button = document.querySelector('#save-button');
button.addEventListener('click', async () => {
  button.loading = true;
  try {
    await saveChanges(); // Your application's save function
  } finally {
    button.loading = false;
  }
});

Handle form submission in the form's submit event. For all Button properties and methods, see Button API.