Overview

Button is a base class for creating custom elements that behave like buttons. Unlike using a native <button> element internally, extending Button makes the custom element itself the button — enabling direct styling via :host, :host(:hover), :host([disabled]), and so on, without ::part().

Button is not registered to a tag. It is a base class only. Extend it to create your own button-like components.

• Shadow DOM with kempo-css button styles applied to :host
• Keyboard accessible: Enter and Space trigger click()
• role="button" and tabindex set automatically
• disabled attribute blocks interaction and sets aria-disabled
• Inherits from ShadowComponent

Basic Usage

Extend Button and register a tag:

import Button from 'kempo-ui/src/components/Button.js';
import {
  html,
  css
} from 'kempo-ui/src/lit-all.min.js';
class MyButton extends Button {}
customElements.define('my-button', MyButton);

Custom Styles

Extend Button.styles to preserve the base button appearance while adding your own:

import Button from 'kempo-ui/src/components/Button.js';
import {
  html,
  css
} from 'kempo-ui/src/lit-all.min.js';
export default class IconButton extends Button {
  static properties = {
    ...Button.properties,
    icon: {
      type: String,
      reflect: true
    },
    label: {
      type: String,
      reflect: true
    }
  };
  render() {
    return html`<k-icon name="${this.icon}"></k-icon> ${this.label}`;
  }
  static styles = [
    Button.styles,
    css`
      :host {
        gap: var(--spacer_sm);
        align-items: center;
        display: inline-flex;
      }
    `
  ];
}
customElements.define('my-icon-button', IconButton);

Overriding Event Handlers

Event handlers are public arrow function class fields. Subclasses can override them directly, or add their own handlers on top. This is useful for building control components that perform an action when clicked:

import Button from 'kempo-ui/src/components/Button.js';
export default class MyControl extends Button {
  handleAction() {
    // override this in subclasses
  }
  handleClick = () => this.handleAction();
  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('click', this.handleClick);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener('click', this.handleClick);
  }
}

Disabled State

Set the disabled attribute or property to block interaction. When disabled:

• Click events are stopped via stopImmediatePropagation()
• Keyboard activation (Enter / Space) is suppressed
• tabindex="-1" removes it from the tab order
• aria-disabled="true" is set for screen readers
• :host([disabled]) reduces opacity and changes cursor

JavaScript Reference

Constructor

Extends ShadowComponent

new Button()

Base class only — not registered to a tag. Extend this class and register your own tag.

Static Properties

styles: CSSResult | CSSResult[]

Lit static styles providing the base button appearance. Spread or array-extend this in subclasses: static styles = [Button.styles, css`...`].

Properties

disabled: boolean

Reflects to the disabled attribute. When true, blocks all interaction and updates tabindex and aria-disabled accordingly.

Methods

Inherits all methods from ShadowComponent.

Event Handlers

These are public arrow function class fields — they can be referenced directly (e.g. to addEventListener / removeEventListener) or overridden in a subclass.

handleClick: (e: Event) => void

Stops propagation when disabled. Registered on the host element in connectedCallback.

handleKeyDown: (e: KeyboardEvent) => void

Calls this.click() when Enter or Space is pressed and the element is not disabled.