Display and feedback

Spinner

Compact live loading indicator with an accessible label.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Spinner } from "@cofob/design-system-react";

/**
 * Complete Spinner parameter reference.
 * @param label
 *   type: string | renderable content
 *   default: "Loading"
 *   example: "Accessible label"
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param span attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function SpinnerExample() {
  return (
    <Spinner label="Loading results" />
  );
}

Svelte

<script lang="ts">
  import { Spinner } from "@cofob/design-system-svelte";

  // Complete Spinner parameter reference.
  // label
  //   type: string | renderable content
  //   default: "Loading"
  //   example: "Accessible label"
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // span attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Spinner label="Loading results" />

HTML

<!--
  Complete Spinner parameter reference.
  label
    type: string | renderable content
    default: "Loading"
    example: "Accessible label"
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  span attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<span class="cf-spinner" role="status"><span class="cf-visually-hidden">Loading</span></span>

Contract

CSS selector	`.cf-spinner`
Adapters	Native · React · Svelte
Primary props	label · size · span attributes
Documented states	sm · md · lg · reduced motion
Interaction	Static and SSR-safe
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`label`	`string \| renderable content`	`"Loading"`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`size`	`"sm" \| "md" \| "lg" (plus heading sizes)`	`"md"`	React · Svelte · HTML	`"md"`	Applies a design-system size token.
`span attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.