Photonix

Spinner

A loading indicator for asynchronous processes.

Preview

Usage
"use client";

import { Spinner } from '@photonix/ultimate';

export default function SpinnerPreviewExample() {
    return <Spinner size="medium" variant="default" />;
}

Component API

Spinner

Prop
Type
Default
Description
size
"small" | "large" | "medium"
'medium'
Size of the spinner - small: 16px - medium: 24px (default) - large: 32px
color
string
-
Custom color for the spinner If not provided, it inherits current text color
variant
"default" | "inverse"
'default'
Visual variant - default: Standard colors for light backgrounds - inverse: Inverted colors for dark backgrounds
forceTheme
"Light" | "Dark"
-
Force a specific theme's color tokens Useful when component needs to use Light theme tokens regardless of current theme

Variants

Sizes

Available in various sizes.

Small

Medium

Large

Sizes
"use client";

import { Flex, Spinner, Text } from '@photonix/ultimate';

export default function SpinnerSizesExample() {
    return (
        <Flex gap="xl" align="center">
            <Flex direction="column" align="center" gap="sm">
                <Spinner size="small" />
                <Text variant="label-sm" color="secondary">Small</Text>
            </Flex>
            <Flex direction="column" align="center" gap="sm">
                <Spinner size="medium" />
                <Text variant="label-sm" color="secondary">Medium</Text>
            </Flex>
            <Flex direction="column" align="center" gap="sm">
                <Spinner size="large" />
                <Text variant="label-sm" color="secondary">Large</Text>
            </Flex>
        </Flex>
    );
}

Colors

Custom colors or inverse variant for dark mode.

Custom Hex

Inverse (On Dark)

Colors
"use client";

import { Box, Flex, Spinner, Text } from '@photonix/ultimate';

export default function SpinnerColorsExample() {
    return (
        <Flex gap="xl" align="center">
            <Flex direction="column" align="center" gap="sm">
                <Spinner size="medium" color="#007aff" />
                <Text variant="label-sm" color="secondary">Custom Hex</Text>
            </Flex>
            <Flex direction="column" align="center" gap="sm">
                <Box style={{ padding: '16px', background: '#333', borderRadius: '8px' }}>
                    <Spinner size="medium" variant="inverse" />
                </Box>
                <Text variant="label-sm" color="secondary">Inverse (On Dark)</Text>
            </Flex>
        </Flex>
    );
}

On this page

Preview
Component API
Variants
Sizes
Colors
Photonix UI - React Components, Templates & Figma Design System