Density

Progress

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

Importing files
x
Syncing changes
x
x
import { Panel, Progress } from "density-base-ui";

export default function ProgressExample() {
  return (
    <Panel style={{ gap: "1rem", width: 320 }}>
      <Progress
        aria-label="Import progress"
        label="Importing files"
        showValue
        value={68}
      />
      <Progress
        aria-label="Sync progress"
        density-emphasis="secondary"
        density-size="sm"
        label="Syncing changes"
        showValue
        value={42}
      />
      <Progress aria-label="Loading project" value={null} />
    </Panel>
  );
}

Props

Prop Attribute Values Default
value None Number, null None
label None React node None
showValue None true, false false
renderValue None (formattedValue, value) => ReactNode None
density-emphasis data-dn-emphasis Density emphasis values normal
density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Other progress root props Mixed Base UI progress root props None