Progress

Example

When to use

• Use the bar for a long page-level or upload task, and the spinner for a compact, inline wait (a button or a card placeholder).
• Reach for a progress indicator whenever an operation takes long enough that the UI would otherwise feel frozen, so the user knows work is in flight.

When not to use

• To report a completed outcome — success, warning, or error — use an Alert or a transient Toast, not a progress indicator.
• To render an avatar or icon with a busy state on a button, prefer a disabled Button with an inline spinner over a standalone bar.
• When there is genuinely no data yet (rather than a load in progress), show an Empty State instead.

Related components

• Button — pair a spinner with a disabled button for inline waits.
• Empty State — for the no-data placeholder after loading resolves.
• Alert — to surface the result of the operation.
• Toast — transient confirmation when work finishes.