Progress Button
<base-progress-button> is a button with built-in progress state. While loading is true the label fades out — keeping the button's width stable — and a centered spinner takes its place. It wraps base-button, so every color, size, and width is supported.
Live demo
Click the button to start a simulated save. The label is swapped for a spinner while the button keeps its exact width, and it is blocked until the operation completes.
HTML
Colors
Use color like on base-button; the spinner color is derived automatically so it stays visible on every background. Override it with spinnerColor if needed.
HTML
Sizes
Use size like on base-button. The spinner is 20×20px on the default size and scales proportionally with the button — click any of them to see it.
HTML
Usage notes
- Bind
[loading]to your async operation and set it back to false when done. - The
(clicked)output only fires while the button is enabled and not loading. - While loading the button blocks interaction without changing its look — no disabled fade — and gets
aria-disabledplusaria-busy. - Use
width="100%"for full-width actions that must not jump during loading.
Installation
Run the following command to add this component to your project:
bash
npx base-ui-cli add progress-button
API Reference
Base UI provides standalone components. Import the exact elements you want to use into your component.
typescript (Example)
import { ProgressButtonComponent } from '@lussos/base-ui';
@Component({
selector: 'app-your-component',
imports: [
ProgressButtonComponent
],
template: `...`
})
export class YourComponent {} Properties for progress-button — generated from JSDoc in the library source.
| Selector | Property | Type | Default | Description |
|---|---|---|---|---|
base-progress-button | class | string | '' | Extra host classes merged via `cn()`. |
base-progress-button | loading | boolean | false | Whether the progress spinner is shown and the button blocks interaction. The button keeps its normal appearance while loading — no disabled fade — it just swaps the label for the spinner. |
base-progress-button | color | ButtonColor | string | 'primary' | The semantic visual color, forwarded to `base-button`. |
base-progress-button | size | ButtonSize | 'default' | The button size, forwarded to `base-button`. |
base-progress-button | width | string | '' | Optional custom width (e.g. `'100%'`), forwarded to `base-button`. |
base-progress-button | type | 'button' | 'submit' | 'reset' | 'button' | Native button type. |
base-progress-button | disabled | boolean | false | Whether the button is disabled. |
base-progress-button | spinnerColor | SpinnerColor | undefined | undefined | Override the spinner color; by default it is derived from `color`. |
base-progress-button | (clicked) | void | — | Emits when the button is clicked while enabled and not loading. |
On this page