Button — JavaScript

The markup and CSS classes are on the HTML & CSS page. This page covers wiring it up.

Initialize

import { Button } from '@popovandrii/ui-elements'
import '@popovandrii/ui-elements/style.css'

const btn = new Button()

Events

A click dispatches ui-button-change — only when data-value is set:

document.addEventListener('ui-button-change', (e) => {
  const { id, value } = (e as CustomEvent).detail
})

For an <a> with a real href, the browser navigates normally; a placeholder (# or empty) is suppressed so it acts as an in-page button.

Programmatic API

const el = document.querySelector('.UIb')!

btn.setValue(el, 'next', { label: 'Next →' }) // update data-value (+ text, + href for <a>)
btn.setDisabled(el, true)                      // enable/disable
btn.destroy()
btn.scan()

Usage with Vue

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { Button } from '@popovandrii/ui-elements'
import '@popovandrii/ui-elements/style.css'

const root = ref<HTMLElement>()
let btn: Button | null = null

function onChange(e: Event) {
  const { id, value } = (e as CustomEvent).detail // the button's data-value
  console.log(id, value)
}

onMounted(() => {
  btn = new Button({}, false, { root: root.value! })
  root.value!.addEventListener('ui-button-change', onChange)
})
onUnmounted(() => {
  root.value?.removeEventListener('ui-button-change', onChange)
  btn?.destroy()
})
</script>

<template>
  <div ref="root">
    <button class="UIb primary" data-value="save" type="button">Save</button>
  </div>
</template>

For a plain click you can skip the manager entirely and use Vue's @click. Use Button when you want the ripple, the data-value event, or setDisabled(). Shared patterns are in the full Usage with Vue guide.