Progress Button

<ply-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 ply-button, so every color, size, and width is supported.

free

Playground

color

size

width

type

disabled

spinnerColor

HTML

<ply-progress-button color="primary" size="default" type="button" spinnerColor="primary">Progress Button</ply-progress-button>

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

<ply-progress-button color="primary" [loading]="saving()" (clicked)="save()">
  Save changes
</ply-progress-button>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add progress-button
// Paths are relative to aliases.components (default: src/app/components)
import { ProgressButtonComponent } from './progress-button/progress-button.component';

@Component({
  selector: 'app-progress-button-example',
  imports: [
    ProgressButtonComponent
  ],
  template: `...`
})
export class ProgressButtonExampleComponent {}

Install

bash

npx ply-ui-cli add progress-button

Colors

Use color like on ply-button; the spinner color is derived automatically so it stays visible on every background. Override it with spinnerColor if needed.

HTML

<ply-progress-button color="success" [loading]="saving()">Save</ply-progress-button>
<ply-progress-button color="black" [loading]="saving()" spinnerColor="primary">Save</ply-progress-button>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add progress-button
// Paths are relative to aliases.components (default: src/app/components)
import { ProgressButtonComponent } from './progress-button/progress-button.component';

@Component({
  selector: 'app-progress-button-example',
  imports: [
    ProgressButtonComponent
  ],
  template: `...`
})
export class ProgressButtonExampleComponent {}

Install

bash

npx ply-ui-cli add progress-button

Sizes

Use size like on ply-button. The spinner is 20×20px on the default size and scales proportionally with the button — click any of them to see it.

HTML

<ply-progress-button size="sm" [loading]="saving()">Save</ply-progress-button>
<ply-progress-button size="lg" [loading]="saving()">Save</ply-progress-button>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add progress-button
// Paths are relative to aliases.components (default: src/app/components)
import { ProgressButtonComponent } from './progress-button/progress-button.component';

@Component({
  selector: 'app-progress-button-example',
  imports: [
    ProgressButtonComponent
  ],
  template: `...`
})
export class ProgressButtonExampleComponent {}

Install

bash

npx ply-ui-cli add progress-button

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-disabled plus aria-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 ply-ui-cli add progress-button

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add progress-button
// Paths are relative to aliases.components (default: src/app/components)
import { ProgressButtonComponent } from './progress-button/progress-button.component';

@Component({
  selector: 'app-your-component',
  imports: [
    ProgressButtonComponent
  ],
  template: `...`
})
export class YourComponent {}

API for progress-button — generated from JSDoc in the library source.

API reference for progress-button
API	Member	Type	Default	Description
`ply-progress-button`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-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.
`ply-progress-button`	`color`	`ButtonColor`	`'primary'`	The semantic visual color, forwarded to `ply-button`.
`ply-progress-button`	`size`	`ButtonSize`	`'default'`	The button size, forwarded to `ply-button`.
`ply-progress-button`	`width`	`string`	`''`	Optional custom width (e.g. `'100%'`), forwarded to `ply-button`.
`ply-progress-button`	`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type.
`ply-progress-button`	`disabled`	`boolean`	`false`	Whether the button is disabled.
`ply-progress-button`	`spinnerColor`	`SpinnerColor \| undefined`	`undefined`	Override the spinner color; by default it is derived from `color`.
`ply-progress-button`	`(clicked)`	`void`	—	Emits when the button is clicked while enabled and not loading.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).