Components

Spinner

An animated loading indicator.

php artisan blatui:add spinner

<x-ui.spinner />

Button

<x-ui.button disabled>
    <x-ui.spinner />
    Please wait
</x-ui.button>

Colors

{{-- Tint the spinner with any text color utility. --}}
<div class="flex items-center gap-6">
    <x-ui.spinner class="text-primary" />
    <x-ui.spinner class="text-sky-600 dark:text-sky-400" />
    <x-ui.spinner class="text-green-600 dark:text-green-400" />
    <x-ui.spinner class="text-amber-600 dark:text-amber-400" />
    <x-ui.spinner class="text-destructive" />
</div>

Custom Icon

{{-- Swap the default loader for any lucide icon via the `icon` prop. --}}
<div class="flex items-center gap-6">
    <x-ui.spinner icon="loader-circle" class="size-6" />
    <x-ui.spinner icon="rotate-cw" class="size-6 text-sky-600 dark:text-sky-400" />
    <x-ui.spinner icon="loader-pinwheel" class="size-6 text-green-600 dark:text-green-400" />
    <x-ui.spinner icon="refresh-ccw" class="size-6 text-amber-600 dark:text-amber-400" />
    <x-ui.spinner icon="settings" class="size-6 text-destructive" />
</div>

Sizes

<div class="flex items-center gap-6">
    <x-ui.spinner class="size-4" />
    <x-ui.spinner class="size-6" />
    <x-ui.spinner class="size-8" />
</div>

With Label

Loading…

<div class="text-muted-foreground flex items-center gap-2 text-sm">
    <x-ui.spinner />
    <span>Loading…</span>
</div>

API Reference

Props, slots and exposed methods for <x-ui.spinner>.

Props

Prop	Type	Default	Description
`icon`	`string`	`'loader-circle'`	Any Lucide icon name to spin (e.g. loader-circle, rotate-cw, loader-pinwheel). The icon is rendered with animate-spin and an aria-label of "Loading".