LoadingSpinner

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

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

export default function LoadingSpinnerExample() {
  return <LoadingSpinner label="Loading" />;
}

Props

Prop	Attribute	Values	Default
`label`	None	React node	None
`showLabel`	None	`true`, `false`	`false`
`orientation`	`data-dn-orientation`	`horizontal`, `vertical`	`horizontal`
`emphasis`	`data-dn-emphasis`	`primary`, `secondary`, `outline`, `ghost`	None
`size`	`data-dn-size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	None
Other native span props	Mixed	`HTMLAttributes<HTMLSpanElement>`	None

Label

Without a label, the spinner is decorative. A label gives it status semantics, and showLabel controls whether that accessible label is also visible.

Loading accountLoading account

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

export default function LoadingSpinnerLabelExample() {
  return (
    <div style={styles.row}>
      <LoadingSpinner />
      <LoadingSpinner label="Loading account" />
      <LoadingSpinner label="Loading account" showLabel />
    </div>
  );
}

const styles = {
  row: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "1rem" },
} as const;

Orientation

HorizontalVertical

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

export default function LoadingSpinnerOrientationExample() {
  return (
    <div style={styles.row}>
      <LoadingSpinner label="Horizontal" orientation="horizontal" showLabel />
      <LoadingSpinner label="Vertical" orientation="vertical" showLabel />
    </div>
  );
}

const styles = {
  row: { alignItems: "center", display: "flex", gap: "2rem" },
} as const;

Emphasis

PrimarySecondaryOutlineGhost

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

export default function LoadingSpinnerEmphasisExample() {
  return (
    <div style={styles.row}>
      <LoadingSpinner emphasis="primary" label="Primary" showLabel />
      <LoadingSpinner emphasis="secondary" label="Secondary" showLabel />
      <LoadingSpinner emphasis="outline" label="Outline" showLabel />
      <LoadingSpinner emphasis="ghost" label="Ghost" showLabel />
    </div>
  );
}

const styles = {
  row: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "1rem" },
} as const;

Size

2xsxssmmdlgxl2xl3xl

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

export default function LoadingSpinnerSizeExample() {
  return (
    <div style={styles.row}>
      <LoadingSpinner label="2xs" showLabel size="2xs" />
      <LoadingSpinner label="xs" showLabel size="xs" />
      <LoadingSpinner label="sm" showLabel size="sm" />
      <LoadingSpinner label="md" showLabel size="md" />
      <LoadingSpinner label="lg" showLabel size="lg" />
      <LoadingSpinner label="xl" showLabel size="xl" />
      <LoadingSpinner label="2xl" showLabel size="2xl" />
      <LoadingSpinner label="3xl" showLabel size="3xl" />
    </div>
  );
}

const styles = {
  row: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "1rem" },
} as const;