@neo4j-ndl/react/skills/ndl-react/components/progress-bar.md

React implementation of Neo4j Design System

# ProgressBar

Import: `import { ProgressBar } from '@neo4j-ndl/react'`

## Props

### ProgressBar

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `heading` | `string` |  |  | The heading displayed above the progress bar |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'small'` |  | `small` | Size of the progress bar |
| `value` | `number` | ✅ |  | The current progress value, should be between 0 and 100 |

## Accessibility

## Implementation guidelines

The progress bar component uses `role='progressbar'` and `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes to communicate its current state to assistive technologies. This ensures that users with disabilities can understand the progress being made.

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ProgressBar } from '@neo4j-ndl/react';

const Component = () => {
  return <ProgressBar value={75} size="large" />;
};

export default Component;
```

### Heading

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ProgressBar } from '@neo4j-ndl/react';

const Component = () => {
  return <ProgressBar heading="Importing data" value={75} size="large" />;
};

export default Component;
```

### Sizes

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ProgressBar } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div className="n-flex n-flex-col n-gap-token-16">
      <ProgressBar value={75} size="small" heading="Small" />
      <ProgressBar value={75} size="large" heading="Large" />
    </div>
  );
};

export default Component;
```