MenuChevron Down
Spinner - Docs - Artefact

Spinner

Feedback
Presentational

Introduction

A component used to indicate a loading state.

Usage

Loading...
import { Spinner } from "../components/ui";

export default function MyPage() {
  return <Spinner size="md" label="Loading..." />;
}

CMS Page Builder

This component is available as a spinner block in the Page Builder (content/pages/*.json):

{
  "type": "spinner",
  "size": "lg",
  "label": "Loading"
}

Props

PropTypeDescription
classstringCustom CSS classes.

| size | `"xs" \ | "sm" \ | "md" \ | "lg" \ | "xl" \ | "2xl" \ | "inherit"` | The size of the spinner. |

| label | string | An accessible label for screen readers. |