ProgressBar

Import

import { ProgressBar, Label } from '@heroui/react';

Usage

<ComponentPreview name="progress-bar-basic" />

Anatomy

import { ProgressBar, Label } from '@heroui/react';

export default () => (
  <ProgressBar value={60}>
    <Label>Loading</Label>
    <ProgressBar.Output />
    <ProgressBar.Track>
      <ProgressBar.Fill />
    </ProgressBar.Track>
  </ProgressBar>
);

Sizes

<ComponentPreview name="progress-bar-sizes" />

Colors

<ComponentPreview name="progress-bar-colors" />

Indeterminate

Use isIndeterminate when progress cannot be determined.

<ComponentPreview name="progress-bar-indeterminate" />

Custom Value Scale

Use minValue, maxValue, and formatOptions to customize the value range and display format.

<ComponentPreview name="progress-bar-custom-value" />

Without Label

When no visible label is needed, use aria-label for accessibility.

<ComponentPreview name="progress-bar-without-label" />

Styling

Passing Tailwind CSS classes

You can customize individual ProgressBar parts:

import { ProgressBar, Label } from '@heroui/react';

function CustomProgressBar() {
  return (
    <ProgressBar value={60}>
      <Label>Loading</Label>
      <ProgressBar.Output />
      <ProgressBar.Track className="bg-purple-100 dark:bg-purple-900">
        <ProgressBar.Fill className="bg-purple-500" />
      </ProgressBar.Track>
    </ProgressBar>
  );
}

Customizing the component classes

To customize the ProgressBar component classes, you can use the @layer components directive.

Learn more.

@layer components {
  .progress-bar {
    @apply w-full gap-2;
  }

  .progress-bar__track {
    @apply h-3 rounded-full;
  }

  .progress-bar__fill {
    @apply rounded-full;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ProgressBar component uses these CSS classes (View source styles):

Base & Element Classes

• .progress-bar - Base container (grid layout)
• .progress-bar__output - Value text display
• .progress-bar__track - Track background
• .progress-bar__fill - Filled portion of the track

Size Classes

• .progress-bar--sm - Small size variant (thinner track)
• .progress-bar--md - Medium size variant (default)
• .progress-bar--lg - Large size variant (thicker track)

Color Classes

• .progress-bar--default - Default color variant
• .progress-bar--accent - Accent color variant
• .progress-bar--success - Success color variant
• .progress-bar--warning - Warning color variant
• .progress-bar--danger - Danger color variant

API Reference

ProgressBar Props

Inherits from React Aria ProgressBar.

ProgressBarRenderProps

When using the render prop pattern, these values are provided: