lit-button

lit-button

Dead simple lit-element button

Installation

yarn add lit-button

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.

CSS Shadow Parts

• button the underlying button.

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

CSS Variables

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

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

Examples

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

Build Instructions

• yarn dev builds the project in dev mode
• yarn build builds and lints the project in production mode
• yarn serve runs a demo page in browser (you have to build the project first)
• yarn test runs UI tests