Components

Spinner

An animated loading indicator to communicate that content is being fetched or processed.

Installation

npm install @trinkui/react

Import

import { Spinner } from "@trinkui/react";

Usage

Display a spinner to indicate loading state.

<Spinner />

<Spinner label="Loading data..." />

Sizes

Available in four sizes: sm, md, lg, and xl.

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

Colors

Use the color prop to match the spinner to its context.

{/* Uses the brand primary color */}
<Spinner color="primary" />

{/* Inherits currentColor from parent text */}
<Spinner color="current" />

{/* White — useful on dark backgrounds or buttons */}
<Spinner color="white" />

With Label

Add a label to show descriptive text alongside the spinner.

<Spinner label="Saving changes..." />
<Spinner size="lg" label="Loading your dashboard..." />

Props

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Size of the spinner
color	"primary" \| "current" \| "white"	"primary"	Color of the spinner
label	string	-	Visible text label displayed next to the spinner

Accessibility

Uses role="status" to announce loading state to assistive technologies.
Applies aria-label="Loading" by default when no visible label is provided.
When a label prop is set, it is used as the accessible name.
Respects prefers-reduced-motion — animation is paused or simplified for users who prefer reduced motion.

← Spacer Switch →