diff --git a/documentation-site/examples/progress-bar/steps.js b/documentation-site/examples/progress-bar/steps.js
new file mode 100644
index 0000000000..ea1ca2ada5
--- /dev/null
+++ b/documentation-site/examples/progress-bar/steps.js
@@ -0,0 +1,41 @@
+// @flow
+import * as React from 'react';
+import {ProgressBar} from 'baseui/progress-bar';
+import {Button, SIZE} from 'baseui/button';
+
+export default function Example() {
+ const STEPS = 5;
+ const stepSize = 100 / STEPS;
+ const [value, setValue] = React.useState(40);
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/documentation-site/examples/progress-bar/steps.tsx b/documentation-site/examples/progress-bar/steps.tsx
new file mode 100644
index 0000000000..1a5e91fd7b
--- /dev/null
+++ b/documentation-site/examples/progress-bar/steps.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {ProgressBar} from 'baseui/progress-bar';
+import {Button, SIZE} from 'baseui/button';
+
+export default function Example() {
+ const STEPS = 5;
+ const stepSize = 100 / STEPS;
+ const [value, setValue] = React.useState(50);
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/documentation-site/pages/components/progress-bar.mdx b/documentation-site/pages/components/progress-bar.mdx
index a147516315..fb2c5fb66a 100644
--- a/documentation-site/pages/components/progress-bar.mdx
+++ b/documentation-site/pages/components/progress-bar.mdx
@@ -14,6 +14,7 @@ import Negative from 'examples/progress-bar/negative.js';
import WithLabel from 'examples/progress-bar/with-label.js';
import CustomLabel from 'examples/progress-bar/custom-label.js';
import Customization from 'examples/progress-bar/overrides.js';
+import Steps from 'examples/progress-bar/steps.js';
import ProgressBarRounded from 'examples/progress-bar/rounded.js';
import { ProgressBar } from 'baseui/progress-bar';
@@ -60,6 +61,14 @@ Indicates a wait time for actions - either within an experience flow or loading
+## Stepped Progress Bar
+
+There is a stepped version of the progress bar. This is useful when an action requires a determinate amount of steps or stages to complete. Each step is a waiting indicator progressing by system action or human interaction.
+
+
+
+
+
## Progress bar rounded
There also is a rounded version of the progress bar