@litforge/loading-button

A button component with built-in loading state support, built with Lit.

Overview

The LoadingButton component provides a button with loading indicator functionality, perfect for async operations like form submissions.

Installation

npm install @litforge/loading-button
# or
pnpm add @litforge/loading-button
# or
yarn add @litforge/loading-button

Basic Usage

<script type="module">
  import '@litforge/loading-button';
</script>

<loading-button
  label="Submit"
  loading="${isLoading}"
  @loading-button-click="${handleClick}"
></loading-button>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | label | string | undefined | Button label text | | loading | boolean | false | Shows loading spinner and disables button | | disabled | boolean | false | Disables the button | | type | 'button' \| 'submit' \| 'reset' | 'button' | HTML button type |

Events

loading-button-click

Fired when the button is clicked (not fired when loading or disabled).

interface LoadingButtonClickDetail {
  originalEvent: MouseEvent;
}

Examples

Basic Button

<loading-button label="Click Me"></loading-button>

With Loading State

<loading-button
  label="Save"
  loading="${saving}"
  @loading-button-click="${handleSave}"
></loading-button>

Submit Button

<loading-button
  label="Submit Form"
  type="submit"
  loading="${submitting}"
></loading-button>

Styling

The component uses CSS variables for theming:

loading-button {
  --lf-loading-button-radius: 8px;
  --lf-loading-button-padding: 12px;
  --lf-loading-button-text-color: #ffffff;
  --lf-loading-button-background: #0b6efd;
  /* ... more variables */
}

TypeScript

import { LoadingButton } from '@litforge/loading-button';
import type { LoadingButtonProps, LoadingButtonClickDetail } from '@litforge/loading-button';

License

Part of the LitForge component library.