Density

Spinner

Spinner provides a native Density loading indicator for places where Base UI does not provide a primitive.

import { Spinner } from "density-base-ui";

export default function SpinnerExample() {
  return <Spinner />;
}

Orientation

import { Spinner, View } from "density-base-ui";

export default function SpinnerOrientationExample() {
  return (
    <View align="center" gap="3xl" orientation="horizontal" padding={false}>
      <Spinner label="Horizontal" orientation="horizontal" />
      <Spinner label="Vertical" orientation="vertical" />
    </View>
  );
}

Size

import { Spinner, View } from "density-base-ui";

export default function SpinnerSizeExample() {
  return (
    <View align="center" gap="xl" orientation="horizontal" padding={false} wrap>
      <Spinner label="2xs" size="2xs" />
      <Spinner label="xs" size="xs" />
      <Spinner label="sm" size="sm" />
      <Spinner label="md" size="md" />
      <Spinner label="lg" size="lg" />
      <Spinner label="xl" size="xl" />
      <Spinner label="2xl" size="2xl" />
      <Spinner label="3xl" size="3xl" />
    </View>
  );
}