Spinner

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download spinner -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Spinner } from "@/components/ui/spinner";

const Component = Spinner;

const args = {
  "size": "4",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    size?: "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24";
  };
</script>

<template>
  <Spinner v-bind="args" />
</template>

Examples

Default

<script setup lang="ts">
import { Spinner } from "@/components/ui/spinner";

const Component = Spinner;

const args = {
  "size": "4",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    size?: "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24";
  };
</script>

<template>
  <Spinner v-bind="args" />
</template>

Sizes

<script setup lang="ts">
import { Spinner } from "@/components/ui/spinner";

const Component = Spinner;

const args = {
  "size": "4",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    size?: "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24";
  };
</script>

<template>
  <div class="flex items-center gap-6">
    <Spinner size="4" /><Spinner size="6" /><Spinner size="10" />
  </div>
</template>

With Label

<script setup lang="ts">
import { Spinner } from "@/components/ui/spinner";

const Component = Spinner;

const args = {
  "size": "4",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    size?: "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24";
  };
</script>

<template>
  <div class="flex items-center gap-2 text-sm text-neutral-mid">
    <Spinner size="4" />Loading...
  </div>
</template>

In Button

<script setup lang="ts">
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

const Component = Spinner;

const args = {
  "size": "4",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    size?: "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24";
  };
</script>

<template>
  <Button variant="tertiary" disabled><Spinner size="4" />Please wait</Button>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.