A button component with built-in loading state support, built with Lit.
npm install @litforge/loading-buttonA button component with built-in loading state support, built with Lit.
The LoadingButton component provides a button with loading indicator functionality, perfect for async operations like form submissions.
``bash`
npm install @litforge/loading-buttonor
pnpm add @litforge/loading-buttonor
yarn add @litforge/loading-button
`html
loading="${isLoading}"
@loading-button-click="${handleClick}"
>
`
| 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 |
Fired when the button is clicked (not fired when loading or disabled).
`typescript`
interface LoadingButtonClickDetail {
originalEvent: MouseEvent;
}
`html`
`html`
loading="${saving}"
@loading-button-click="${handleSave}"
>
`html`
type="submit"
loading="${submitting}"
>
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``
import { LoadingButton } from '@litforge/loading-button';
import type { LoadingButtonProps, LoadingButtonClickDetail } from '@litforge/loading-button';
Part of the LitForge component library.