Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Spinner

A spinning indicator for loading states.

Usage
example.blade.php 
<x-slate::spinner />

Sizes

Size with utility classes.

example.blade.php 
<div class="flex items-center gap-4">
    <x-slate::spinner class="size-3" />
    <x-slate::spinner />
    <x-slate::spinner class="size-6" />
    <x-slate::spinner class="size-8" />
</div>

With button
example.blade.php 
<div class="flex flex-wrap gap-3">
    <x-slate::button disabled>
        <x-slate::spinner />
        Please wait
    </x-slate::button>
    <x-slate::button variant="outline" disabled>
        <x-slate::spinner />
        Loading
    </x-slate::button>
    <x-slate::button variant="secondary" size="icon" disabled aria-label="Loading">
        <x-slate::spinner />
    </x-slate::button>
</div>

Colors

Inherits currentColor from the parent.

example.blade.php 
<div class="flex items-center gap-4">
    <x-slate::spinner class="text-primary" />
    <x-slate::spinner class="text-destructive" />
    <x-slate::spinner class="text-muted-foreground" />
</div>

API Reference
Prop Type Default Description
label string "Loading" Accessible name via aria-label
Last updated .