Web + MobileStableFeedback

Web and mobile — the same component for React and React Native. Stable: its API only changes in a major version.

When to use

For a short wait of unknown length: a search, a refresh, an infinite list loading more.

When not to use

When the layout of what is loading is known.Use instead: Skeleton
When the progress is known.Use instead: Progress
Inside a button that runs an action: set loading on the button.Use instead: Button

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Spinner } from "@krizaka/ui/spinner";

Examples

Default

Named by label.

import { Spinner } from "@krizaka/ui/spinner";

export default function SpinnerDefault() {
  return <Spinner label="Loading" />;
}

Sizes

sm, md, lg.

import { Spinner } from "@krizaka/ui/spinner";

export default function SpinnerSizes() {
  return (
    <div className="flex items-center gap-4">
      <Spinner label="Loading" size="sm" />
      <Spinner label="Loading" size="md" />
      <Spinner label="Loading" size="lg" />
    </div>
  );
}

Muted

The colour follows className.

import { Spinner } from "@krizaka/ui/spinner";

// The colour follows `className` (here a text role).
export default function SpinnerMuted() {
  return <Spinner label="Loading" className="text-fg-secondary" />;
}

Props

A turning ring with role="status" (it stops turning under prefers-reduced-motion).

Prop	Type	Default	Description
`label`required	`string`	—	The accessible name of the wait, e.g. "Loading" — passed translated.
`size`	`"sm" \| "md" \| "lg"`	`md`	sm · md · lg.

Accessibility

role="status" named by label: announced politely.
It stops turning under prefers-reduced-motion.

Best practices

One spinner per region: never a page full of them.
Pass label translated (“Loading”, “Searching”).

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Spinner