Standalone spinner sizes
Use these when the loading state is visible on its own.
<CwSpinner size="sm" />
<CwSpinner size="md" />
<CwSpinner size="lg" />
<CwSpinner size="xl" />CwSpinner
Reusable loading indicator shared by buttons, tables, and async UI states.
Sizes
With Label
Loading sensor data... Syncing greenhouse devices...
Inline Usage
Refreshing table rows...
<CwSpinner size="md" />
<CwSpinner size="lg" showLabel label="Loading data..." />Documentation Upgrade
Start here
CwSpinner is the shared loading indicator used across buttons and async UI. Most screens only need a size choice and, occasionally, an accessible label.
How to think about it
- Pick the smallest size that still reads clearly `sm` and `md` work inline, while `lg` and `xl` are better for loading states that stand on their own.
- Add a label when the spinner stands alone If there is no nearby descriptive text, enable `showLabel` so assistive tech and users both get context.
- Do not duplicate button loading spinners `CwButton` already uses this component internally when `loading` is true.
Props and callbacks
| API | Type | Details |
|---|---|---|
size Default: | 'sm' | 'md' | 'lg' | 'xl' | Spinner size preset. |
showLabel Default: | boolean | Renders an inline status label and enables status ARIA attributes. |
label Default: | string | Status text used when `showLabel` is enabled. |
Copy-paste examples
These snippets intentionally show the full public API surface the live demo relies on.
Accessible loading message
Enable `showLabel` when the spinner is not next to its own explanatory text.
<CwSpinner size="lg" showLabel label="Syncing greenhouse devices..." />