Density

Progress

Progress composes Base UI progress primitives with Density size and emphasis attributes. Secondary retains the neutral filled track, while outline leaves its track transparent and draws a border.

x
import { Progress } from "density-base-ui";

export default function ProgressExample() {
  return (
    <div style={{ width: "100%" }}>
      <Progress aria-label="Import progress" value={64} />
    </div>
  );
}

Value

Determinate
x
Indeterminate
x
import { Progress, View } from "density-base-ui";
export default function ProgressValueExample() {
  return (
    <View gap="xl" layout="grid" padding={false} style={{ width: "100%" }}>
      <Progress label="Determinate" showValue value={64} />
      <Progress label="Indeterminate" value={null} />
    </View>
  );
}

Emphasis

Primary
x
Secondary
x
Outline
x
Ghost primary
x
import { Progress, View } from "density-base-ui";
export default function ProgressEmphasisExample() {
  return (
    <View gap="xl" layout="grid" padding={false} style={{ width: "100%" }}>
      <Progress emphasis="primary" label="Primary" value={64} />
      <Progress emphasis="secondary" label="Secondary" value={64} />
      <Progress emphasis="outline" label="Outline" value={64} />
      <Progress emphasis="ghost-primary" label="Ghost primary" value={64} />
    </View>
  );
}

Size

2xs
x
xs
x
sm
x
md
x
lg
x
xl
x
2xl
x
3xl
x
import { Progress, View } from "density-base-ui";
export default function ProgressSizeExample() {
  return (
    <View gap="xl" layout="grid" padding={false} style={{ width: "100%" }}>
      <Progress label="2xs" size="2xs" value={64} />
      <Progress label="xs" size="xs" value={64} />
      <Progress label="sm" size="sm" value={64} />
      <Progress label="md" size="md" value={64} />
      <Progress label="lg" size="lg" value={64} />
      <Progress label="xl" size="xl" value={64} />
      <Progress label="2xl" size="2xl" value={64} />
      <Progress label="3xl" size="3xl" value={64} />
    </View>
  );
}