mgenware / qing-button

A simple button component based on lit.

qing-button

A simple button component based on lit.

Demo

Demo

Installation

npm i qing-button lit

Usage

Properties

• disabled: boolean indicates whether the button is disabled.
• autofocus: boolean indicates whether the button is focused when the page loads.
• href: string navigates to the given URL when clicked on.
• disableSelectedStyle: boolean opts out of default dimmed background when selected.

Events

• click fires when clicked, doesn't bubble up.

CSS Shadow Parts

• button the underlying button.

qing-button.colored-border::part(button) {
  border: 4px solid yellowgreen;
  border-radius: 10px;
}

CSS Variables

qing-button also has some CSS variables for quick customization.

--button-outline-color focus outline color, defaults to 8dc3eb.

Examples

See demo for more examples.

html`
  <qing-button @click=${() => alert('Hello world')}>Default</qing-button>
  <qing-button disabled>Disabled</qing-button>
  <qing-button autofocus>Auto-focused</qing-button>
`;