Spinner

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/spinner.json

Usage

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

<Spinner />

Examples

Size

Use the size-* utility class to change the size of the spinner.

Colour

Use the text- utility class to change the colour of the spinner.

Button

Add a spinner to a button to indicate a loading state. The <Button /> will handle the spacing between the spinner and the text.

Badge

You can also use a spinner inside a badge.

Input group

Input Group can have spinners inside <InputGroupAddon>.

Empty

Item

Use the spinner inside <ItemMedia> to indicate a loading state.