Density

LoadingSpinner

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

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

export default function LoadingSpinnerExample() {
  return (
    <Panel>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "1rem" }}>
        <LoadingSpinner label="Loading" />
        <LoadingSpinner label="Syncing" showLabel />
        <LoadingSpinner
          density-emphasis="secondary"
          density-size="sm"
          label="Saving"
          showLabel
        />
      </div>
    </Panel>
  );
}

Props

Prop Attribute Values Default
label None React node None
showLabel None true, false false
density-emphasis data-dn-emphasis Density emphasis values normal
density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Other native span props Mixed HTMLAttributes<HTMLSpanElement> None