Spinner

A spinning loading indicator for short, indeterminate waits.

<template>
  <Spinner />
</template>

Props

Name	Type	Default
size	'sm' \| 'md' \| 'lg'	md
icon	string	i-lucide-loader-2
color	string	text-primary

Usage

Examples

Size

The three size steps — sm, md, and lg.

<template>
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
</template>

Custom icon

A different spin glyph for a deliberate, one-off exception.

<template>
  <Spinner icon="i-lucide-refresh-cw" />
</template>

Button

Composed inside a disabled button during a pending action.

<template>
  <Button variant="primary" disabled>
    <template #leftIcon>
      <Spinner size="sm" color="text-text-inverse" />
    </template>
    Please wait
  </Button>
</template>

Badge

Composed inside a badge to show a syncing or loading state.

Syncing

<template>
  <Badge variant="default">
    <template #leftIcon>
      <Spinner size="sm" color="text-text-secondary" />
    </template>
    Syncing
  </Badge>
</template>