Progress indicator
A progress indicator shows the user where they are along the steps of a journey.
Default
Progress indicators in the default (N900) color.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React, { useState } from "react";
import ProgressIndicators from "@neoKit/progressIndicator";
import Buttons from "@neoKit/buttons";
function DefaultIndicator() {
const [selectedIndex, setSelectedIndex] = useState(3);
const [values, setValues] = useState(["one", "two", "three", "four"]);
const dotNextClicked = () => {
if (selectedIndex < values.length) setSelectedIndex(selectedIndex + 1);
};
const dotPrevClicked = () => {
if (selectedIndex > 1) setSelectedIndex(selectedIndex - 1);
};
return (
<div className='flex justify-between items-center'>
<span onClick={() => dotPrevClicked()}>
<Buttons isDisabled={selectedIndex === 1}>
Prev
</Buttons>
</span>
<ProgressIndicators
selectedIndex={selectedIndex}
values={values}
onChange={(values) => setSelectedIndex(values)}
/>
<span onClick={() => dotNextClicked()}>
<Buttons
isDisabled={selectedIndex === values.length}
>
Next
</Buttons>
</span>
</div>
);
}
export default DefaultIndicator;
Primary
Progress indicators in the primary (B400) color.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, { useState } from "react";
import ProgressIndicators from "@neoKit/progressIndicator";
import Buttons from "@neoKit/buttons";
function PrimaryIndicator() {
const [selectedIndex, setSelectedIndex] = useState(3);
const [values, setValues] = useState(["one", "two", "three", "four"]);
const dotNextClicked = () => {
if (selectedIndex < values.length) setSelectedIndex(selectedIndex + 1);
};
const dotPrevClicked = () => {
if (selectedIndex > 1) setSelectedIndex(selectedIndex - 1);
};
return (
<div className='flex justify-between items-center'>
<span onClick={() => dotPrevClicked()}>
<Buttons isDisabled={selectedIndex === 1}>
Prev
</Buttons>
</span>
<ProgressIndicators
selectedIndex={selectedIndex}
values={values}
appearance={"primary"}
onChange={(values) => setSelectedIndex(values)}
/>
<span onClick={() => dotNextClicked()}>
<Buttons
isDisabled={selectedIndex === values.length}
>
Next
</Buttons>
</span>
</div>
);
}
export default PrimaryIndicator;
Help
Progress indicators in the purple (P400) color are used indicate help, for use in user benefit modals.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, { useState } from "react";
import ProgressIndicators from "@neoKit/progressIndicator";
import Buttons from "@neoKit/buttons";
function HelpIndicator() {
const [selectedIndex, setSelectedIndex] = useState(3);
const [values, setValues] = useState(["one", "two", "three", "four"]);
const dotNextClicked = () => {
if (selectedIndex < values.length) setSelectedIndex(selectedIndex + 1);
};
const dotPrevClicked = () => {
if (selectedIndex > 1) setSelectedIndex(selectedIndex - 1);
};
return (
<div className='flex justify-between items-center'>
<span onClick={() => dotPrevClicked()}>
<Buttons isDisabled={selectedIndex === 1}>
Prev
</Buttons>
</span>
<ProgressIndicators
selectedIndex={selectedIndex}
values={values}
appearance={"help"}
onChange={(values) => setSelectedIndex(values)}
/>
<span onClick={() => dotNextClicked()}>
<Buttons
isDisabled={selectedIndex === values.length}
>
Next
</Buttons>
</span>
</div>
);
}
export default HelpIndicator;
Inverted
Use an inverted progress indicator when high contrast against a darker background color is needed.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React, { useState } from "react";
import ProgressIndicators from "@neoKit/progressIndicator";
import Buttons from "@neoKit/buttons";
function InvertedProgressIndicator() {
const [selectedIndex, setSelectedIndex] = useState(3);
const [values, setValues] = useState(["one", "two", "three", "four"]);
const dotNextClicked = () => {
if (selectedIndex < values.length) setSelectedIndex(selectedIndex + 1);
};
const dotPrevClicked = () => {
if (selectedIndex > 1) setSelectedIndex(selectedIndex - 1);
};
return (
<div className='flex justify-between items-center'>
<span onClick={() => dotPrevClicked()}>
<Buttons isDisabled={selectedIndex === 1}>
Prev
</Buttons>
</span>
<ProgressIndicators
selectedIndex={selectedIndex}
values={values}
appearance={"inverted"}
onChange={(values) => setSelectedIndex(values)}
/>
<span onClick={() => dotNextClicked()}>
<Buttons
isDisabled={selectedIndex === values.length}
>
Next
</Buttons>
</span>
</div>
);
}
export default InvertedProgressIndicator;
Size
The size of progress indicators can be small, default (medium), or large depending on how subtle or prominent the indicator should be.
Small
Small sized progress indicators.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, { useState } from "react";
import ProgressIndicators from "@neoKit/progressIndicator";
import Buttons from "@neoKit/buttons";
function SmallProgressIndicator() {
const [selectedIndex, setSelectedIndex] = useState(3);
const [values, setValues] = useState(["one", "two", "three", "four"]);
const dotNextClicked = () => {
if (selectedIndex < values.length) setSelectedIndex(selectedIndex + 1);
};
const dotPrevClicked = () => {
if (selectedIndex > 1) setSelectedIndex(selectedIndex - 1);
};
return (
<div className='flex justify-between items-center'>
<span onClick={() => dotPrevClicked()}>
<Buttons isDisabled={selectedIndex === 1}>
Prev
</Buttons>
</span>
<ProgressIndicators
selectedIndex={selectedIndex}
values={values}
size={"small"}
onChange={(values) => setSelectedIndex(values)}
/>
<span onClick={() => dotNextClicked()}>
<Buttons
isDisabled={selectedIndex === values.length}
>
Next
</Buttons>
</span>
</div>
);
}
export default SmallProgressIndicator;
;
Default (medium)
Default sized progress indicators.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React, { useState } from "react";
import ProgressIndicators from "@neoKit/progressIndicator";
import Buttons from "@neoKit/buttons";
function DefaultProgressIndicator() {
const [selectedIndex, setSelectedIndex] = useState(3);
const [values, setValues] = useState(["one", "two", "three", "four"]);
const dotNextClicked = () => {
if (selectedIndex < values.length) setSelectedIndex(selectedIndex + 1);
};
const dotPrevClicked = () => {
if (selectedIndex > 1) setSelectedIndex(selectedIndex - 1);
};
return (
<div className='flex justify-between items-center'>
<span onClick={() => dotPrevClicked()}>
<Buttons isDisabled={selectedIndex === 1}>
Prev
</Buttons>
</span>
<ProgressIndicators
selectedIndex={selectedIndex}
values={values}
onChange={(values) => setSelectedIndex(values)}
/>
<span onClick={() => dotNextClicked()}>
<Buttons
isDisabled={selectedIndex === values.length}
>
Next
</Buttons>
</span>
</div>
);
}
export default DefaultProgressIndicator;
;
Large
Large sized progress indicators.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, { useState } from "react";
import ProgressIndicators from "@neoKit/progressIndicator";
import Buttons from "@neoKit/buttons";
function LargeProgressIndicator() {
const [selectedIndex, setSelectedIndex] = useState(3);
const [values, setValues] = useState(["one", "two", "three", "four"]);
const dotNextClicked = () => {
if (selectedIndex < values.length) setSelectedIndex(selectedIndex + 1);
};
const dotPrevClicked = () => {
if (selectedIndex > 1) setSelectedIndex(selectedIndex - 1);
};
return (
<div className='flex justify-between items-center'>
<span onClick={() => dotPrevClicked()}>
<Buttons isDisabled={selectedIndex === 1}>
Prev
</Buttons>
</span>
<ProgressIndicators
selectedIndex={selectedIndex}
values={values}
size={"large"}
onChange={(values) => setSelectedIndex(values)}
/>
<span onClick={() => dotNextClicked()}>
<Buttons
isDisabled={selectedIndex === values.length}
>
Next
</Buttons>
</span>
</div>
);
}
export default LargeProgressIndicator;
;
Spacing
Spacing of the dots can be either comfortable, cozy, or compact depending on the availability of space on the page.
Comfortable
Progress indicators with the default comfortable spacing.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, { useState } from "react";
import ProgressIndicators from "@neoKit/progressIndicator";
import Buttons from "@neoKit/buttons";
function ComfortableProgressIndicator() {
const [selectedIndex, setSelectedIndex] = useState(3);
const [values, setValues] = useState(["one", "two", "three", "four"]);
const dotNextClicked = () => {
if (selectedIndex < values.length) setSelectedIndex(selectedIndex + 1);
};
const dotPrevClicked = () => {
if (selectedIndex > 1) setSelectedIndex(selectedIndex - 1);
};
return (
<div className='flex justify-between items-center'>
<span onClick={() => dotPrevClicked()}>
<Buttons isDisabled={selectedIndex === 1}>
Prev
</Buttons>
</span>
<ProgressIndicators
selectedIndex={selectedIndex}
values={values}
spacing="comfortable"
onChange={(values) => setSelectedIndex(values)}
/>
<span onClick={() => dotNextClicked()}>
<Buttons
isDisabled={selectedIndex === values.length}
>
Next
</Buttons>
</span>
</div>
);
}
export default ComfortableProgressIndicator;
;
Cozy
Progress indicators with cozy spacing.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React, { useState } from "react";
import ProgressIndicators from "@neoKit/progressIndicator";
import Buttons from "@neoKit/buttons";
function CozyProgressIndicator() {
const [selectedIndex, setSelectedIndex] = useState(3);
const [values, setValues] = useState(["one", "two", "three", "four"]);
const dotNextClicked = () => {
if (selectedIndex < values.length) setSelectedIndex(selectedIndex + 1);
};
const dotPrevClicked = () => {
if (selectedIndex > 1) setSelectedIndex(selectedIndex - 1);
};
return (
<div className='flex justify-between items-center'>
<span onClick={() => dotPrevClicked()}>
<Buttons isDisabled={selectedIndex === 1}>
Prev
</Buttons>
</span>
<ProgressIndicators
selectedIndex={selectedIndex}
values={values}
spacing='cozy'
onChange={(values) => setSelectedIndex(values)}
/>
<span onClick={() => dotNextClicked()}>
<Buttons
isDisabled={selectedIndex === values.length}
>
Next
</Buttons>
</span>
</div>
);
}
export default CozyProgressIndicator;
Compact
Progress indicators with compact spacing.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React, { useState } from "react";
import ProgressIndicators from "@neoKit/progressIndicator";
import Buttons from "@neoKit/buttons";
function CompactProgressIndicator() {
const [selectedIndex, setSelectedIndex] = useState(3);
const [values, setValues] = useState(["one", "two", "three", "four"]);
const dotNextClicked = () => {
if (selectedIndex < values.length) setSelectedIndex(selectedIndex + 1);
};
const dotPrevClicked = () => {
if (selectedIndex > 1) setSelectedIndex(selectedIndex - 1);
};
return (
<div className='flex justify-between items-center'>
<span onClick={() => dotPrevClicked()}>
<Buttons isDisabled={selectedIndex === 1}>
Prev
</Buttons>
</span>
<ProgressIndicators
selectedIndex={selectedIndex}
values={values}
spacing='compact'
onChange={(values) => setSelectedIndex(values)}
/>
<span onClick={() => dotNextClicked()}>
<Buttons
isDisabled={selectedIndex === values.length}
>
Next
</Buttons>
</span>
</div>
);
}
export default CompactProgressIndicator;
Interaction
If interaction is enabled, the user is able to navigate to the selected step by selecting the corresponding dot indicator. Once the dots are in focus, navigation can be accomplished using the keyboard arrow keys.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React, { useState } from "react";
import ProgressIndicators from "@neoKit/progressIndicator";
import Buttons from "@neoKit/buttons";
function InteractionProgressIndicator() {
const [selectedIndex, setSelectedIndex] = useState(3);
const [values, setValues] = useState(["one", "two", "three", "four"]);
const dotNextClicked = () => {
if (selectedIndex < values.length) setSelectedIndex(selectedIndex + 1);
};
const dotPrevClicked = () => {
if (selectedIndex > 1) setSelectedIndex(selectedIndex - 1);
};
return (
<div className='flex justify-between items-center'>
<span onClick={() => dotPrevClicked()}>
<Buttons isDisabled={selectedIndex === 1}>
Prev
</Buttons>
</span>
<ProgressIndicators
selectedIndex={selectedIndex}
values={values}
onChange={(values) => setSelectedIndex(values)}
/>
<span onClick={() => dotNextClicked()}>
<Buttons
isDisabled={selectedIndex === values.length}
>
Next
</Buttons>
</span>
</div>
);
}
export default InteractionProgressIndicator;