In progress

Spinner

TODO: Brief description of what the component does and its primary purpose.

• Figma
• Storybook
• Edit this page
• Create a new issue

Code example

import { Spinner } from '@yleisradio/yds-components-react';

<Spinner />

Why to use

TODO: Explain the purpose and benefits of the component. What problems does it solve? Why should developers use this component instead of building their own or using alternatives?

When to use

TODO: Describe the specific scenarios and use cases where this component should be used.

Do

• TODO: List of best practices and recommended usage patterns
• TODO: Each item should be specific and actionable
• TODO: Focus on when and how to use the component effectively

Don't

• TODO: List of things to avoid when using this component
• TODO: Common mistakes or anti-patterns
• TODO: When NOT to use this component

Anatomy

TODO: Include an anatomy diagram if available, showing the different parts of the component

1. Spinner Wheel – TODO: Description of this part.
2. Background Circle – TODO: Description of this part.
3. Label – TODO: Description of optional elements.

Key Spinner Props

Use these props to configure the Spinner component.

size

Controls the dimensions of the spinner.

Value	Example	Description
sm		Small spinner (24px) for inline use
md		Default size (48px) for general use
lg		Large spinner (72px) for prominent loading states

Code example

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

variant

Defines the visual style and color scheme.

Value	Example	Description
default		Standard spinner using default text color
highlight		Highlighted spinner using accent color
default-negative		Default spinner for dark backgrounds
highlight-negative		Highlighted spinner for dark backgrounds

Code example

<Spinner variant="default" />
<Spinner variant="highlight" />
<Spinner variant="default-negative" />
<Spinner variant="highlight-negative" />

hasBackground

Adds a background circle to improve visibility.

Type	Example	Description
boolean		Shows a subtle background circle behind the spinner

Code example

<Spinner hasBackground />
<Spinner hasBackground={false} />

label

Provides descriptive text below the spinner.

Type	Example	Description
string	Loading...	Text displayed below the spinner

Code example

<Spinner label="Loading..." />
<Spinner label="Processing your request" />

colors

Custom color overrides for advanced styling.

Type	Example	Description
{ spinner?: string; background?: string }		Custom colors for spinner and background

Code example

<Spinner colors={{ spinner: '#ff0000' }} />
<Spinner colors={{ spinner: '#0066cc', background: '#e6f3ff' }} hasBackground />

Behavior

TODO: Describe how the component behaves in different states and interactions

• TODO: Behavior point 1
• TODO: Behavior point 2
• TODO: How it responds to user interactions

Accessibility

TODO: List accessibility features and requirements

• TODO: Accessibility requirement 1
  (WCAG Reference)
• TODO: Accessibility requirement 2
  (WCAG Reference)

API Reference

Props

The Spinner component accepts all standard HTML <div> attributes in addition to the following props:

Prop	Type	Required	Default	Description
size	'sm' | 'md' | 'lg'	No	'md'	Size of the spinner
variant	'default' | 'highlight' | 'default-negative' | 'highlight-negative'	No	'default'	Visual style variant
hasBackground	boolean	No	false	Whether to show background circle
label	string	No	—	Text label displayed below spinner
colors	{ spinner?: string; background?: string }	No	—	Custom color overrides

Type Definitions

export const spinnerSizes = ['sm', 'md', 'lg'] as const;
export const spinnerVariants = [
  'default',
  'highlight', 
  'default-negative',
  'highlight-negative',
] as const;

interface colors {
  spinner?: string;
  background?: string;
}

export type SpinnerDSProps = {
  size?: (typeof spinnerSizes)[number];
  variant?: (typeof spinnerVariants)[number];
  hasBackground?: boolean;
  label?: string;
  colors?: colors;
};

export type SpinnerProps = SpinnerDSProps & HTMLAttributes<HTMLDivElement>;

Related Components

• Button – Can show loading state with spinner
• TextInput – Has showLoadingIndicator prop for inline spinners