Progress

import { ProgressDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Progress);

Usage

Compound components

Vertical orientation

With tooltips

Section width transition

Set transitionDuration to a number of milliseconds to enable width transition:

Example: progress with segments

Accessibility

• Progress section has the role="progressbar" attribute
• Progress section has the aria-valuenow attribute with the current value
• aria-valuemin and aria-valuemax attributes are always set to 0 and 100 as the component does not support other values

Set the aria-label attribute to label the progress:

import { Progress } from '@mantine/core';

function Demo() {
  return <Progress aria-label="Uploading progress" value={10} />;
}

function DemoCompound() {
  return (
    <Progress.Root>
      <Progress.Section aria-label="Uploading progress" value={10} />
    </Progress.Root>
  );
}