Density

Progress

Progress composes Base UI progress primitives with Density size and emphasis attributes.

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

export default function ProgressExample() {
  return (
    <div style={styles.root}>
      <Progress aria-label="Import progress" value={68} />
    </div>
  );
}

const styles = {
  root: { width: "100%" },
} as const;

Props

Prop Attribute Values Default
value None Number, null None
label None React node None
showValue None true, false false
emphasis data-density-emphasis primary, secondary, outline, ghost None
size data-density-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl None
Other progress root props Mixed Base UI progress root props None

Value

Determinate
x
Indeterminate
x
import { Progress } from "density-base-ui";
export default function ProgressValueExample() {
  return (
    <div style={styles.stack}>
      <Progress label="Determinate" showValue value={68} />
      <Progress label="Indeterminate" value={null} />
    </div>
  );
}
const styles = {
  stack: { display: "grid", gap: "1rem", width: "100%" },
} as const;

Emphasis

Primary
x
Secondary
x
Outline
x
Ghost
x
import { Progress } from "density-base-ui";
export default function ProgressEmphasisExample() {
  return (
    <div style={styles.stack}>
      <Progress emphasis="primary" label="Primary" value={68} />
      <Progress emphasis="secondary" label="Secondary" value={68} />
      <Progress emphasis="outline" label="Outline" value={68} />
      <Progress emphasis="ghost" label="Ghost" value={68} />
    </div>
  );
}
const styles = {
  stack: { display: "grid", gap: "1rem", width: "100%" },
} as const;

Size

2xs
x
xs
x
sm
x
md
x
lg
x
xl
x
2xl
x
3xl
x
import { Progress } from "density-base-ui";
export default function ProgressSizeExample() {
  return (
    <div style={styles.stack}>
      <Progress label="2xs" size="2xs" value={68} />
      <Progress label="xs" size="xs" value={68} />
      <Progress label="sm" size="sm" value={68} />
      <Progress label="md" size="md" value={68} />
      <Progress label="lg" size="lg" value={68} />
      <Progress label="xl" size="xl" value={68} />
      <Progress label="2xl" size="2xl" value={68} />
      <Progress label="3xl" size="3xl" value={68} />
    </div>
  );
}
const styles = {
  stack: { display: "grid", gap: "1rem", width: "100%" },
} as const;