@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

``bash
npm install @litforge/loading-button


or

pnpm add @litforge/loading-button

or

yarn add @litforge/loading-button
`

Basic Usage

`html


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

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

$3

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

`typescript
interface LoadingButtonClickDetail {
originalEvent: MouseEvent;
}
`

Examples

$3

`html

`

$3

`html
label="Save"
loading="${saving}"
@loading-button-click="${handleSave}"
>
`

$3

`html
label="Submit Form"
type="submit"
loading="${submitting}"
>
`

Styling

The component uses CSS variables for theming:

`css
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

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

License

Part of the LitForge component library.