Progress 10.16.0

ARIA

RTL

A progress indicator (Circular and Linear) is a visual representation of a user’s progress through a set of steps, guiding toward the completion of a specified process.

Default

"use client";

import { Progress } from "@heathmont/moon-core-tw";

const Default = () => <Progress />;

export default Default;

The Progress offers an optional size property, which by default has the value 2xs. To modify the sizing, simply assign any of the specified sizes to the size property: 6xs, 5xs, 4xs, 3xs, or 2xs.

"use client";

import { Progress } from "@heathmont/moon-core-tw";

const Size = () => (
  <>
    <Progress size="6xs" value={75} />
    <Progress size="5xs" value={75} />
    <Progress size="4xs" value={75} />
    <Progress size="3xs" value={75} />
    <Progress value={75} />
  </>
);

export default Size;

Value

The Progress has an optional value property that defaults to 0. You can assign any numerical value between 0 and 100 to represent the progress percentage.

"use client";

import { Progress } from "@heathmont/moon-core-tw";

const Value = () => (
  <>
    <Progress value={33} />
    <Progress value={66} />
    <Progress value={100} />
  </>
);

export default Value;

With Pin

If you need to highlight the current percentage on the progress bar, you can use the Pin sub-component. The Pin consists of two interconnected elements that display the rounded percentage value.

75%

"use client";

import { Progress } from "@heathmont/moon-core-tw";

const Pin = () => (
  <Progress value={75}>
    <Progress.Pin />
  </Progress>
);

export default Pin;

With labels

You can employ the provided HTML template to incorporate labels into the Progress component. This is a straightforward HTML structure with some added styling. Feel free to customize it to suit your specific needs.

0%100%

Progress Title

"use client";

import { Progress } from "@heathmont/moon-core-tw";

const WithLabels = () => (
  <div className="flex flex-col w-full gap-1 text-moon-10-caption font-medium uppercase">
    <div className="flex gap-1 justify-between">
      <span>0%</span>
      <span>100%</span>
    </div>
    <Progress value={75} />
    <span className="text-center">Progress Title</span>
  </div>
);

export default WithLabels;

Customization

The Progress can be further styled using the className property. Essentially, the Progress consists of two elements: a wrapper div that represents the background, and an inner div with the class progress that represents the progress bar itself.

"use client";

import { Progress } from "@heathmont/moon-core-tw";

const Customization = () => (
  <Progress value={75} className="bg-whis [&_.progress]:bg-dodoria" />
);

export default Customization;

Progress

These are props specific to the Progress component:

Name	Type	Default
className	string	-
size	"6xs" \| "5xs" \| "4xs" \| "3xs" \| "2xs"	2xs
value	number	0

Progress.Pin

These are props specific to the Progress.Pin component:

Name	Type	Default
className	string	-