The loading glyph UiButton uses, as a standalone primitive. Colour is inherited via text-*, like any icon. Decorative by default and hidden from assistive technology; give it a label and it becomes a live status region that announces on its own.
Examples
Sizes
Five sizes from xs to xl; colour is inherited from the text colour.
<div class="flex items-center gap-4 text-primary-600 dark:text-primary-400">
<UiSpinner size="xs" />
<UiSpinner size="sm" />
<UiSpinner size="md" />
<UiSpinner size="lg" />
<UiSpinner size="xl" />
</div>Labelled
A label turns it into a live status region for when it stands alone.
<UiSpinner size="lg" label="Syncing" class="text-primary-600 dark:text-primary-400" />Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | string | 'md' | Diameter of the spinner. xssmmdlgxl |
| label | string | '' | Accessible label; when set, the spinner is announced as a live status region. |
| icon | string | 'mdi:loading' | MDI glyph to spin; pass another (e.g. mdi:sync) for a different look. |