Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Blogs
All blogsStepper
Designer doc
Stepper component helps user to manage navigation in a sequence manner.
Example
Basic Stepper
The basic stepper is horizontal and medium size. Step value start from 0 instead of 1 If buttonClickable is true, StepButton will be clickable
View code
Bar Stepper
Bar stepper only have horizontal orientation and don’t have connector. Bar stepper with size small will not have description, and long description content will be wrap in EllipsisTooltip.
View code
Dot Stepper
Dot stepper comes with horizontal and vertical orientation but does not different in size.
View code
Vertical and Small size Stepper Variant
The basic stepper support vertical orientation and small size. The dot stepper support vertical orientation.
View code
Icon Stepper
Custom icon can pe provided, icon size requirement is 16px.
View code
Advanced usage
For vertical stepper the description part can be use as content
View code
References
- Ant Design: https://ant.design/components/steps/
- Material UI: https://material-ui.com/components/steppers/
API
Step
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| connector | ReactNode | ||
| description | ReactElement<any, string | JSXElementConstructor<any>> | ||
| index | number | ||
| status | StepStatuses | ||
| title | ReactNode |
StepButton
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| clickable | boolean | default is true if onClick is provided, or else default to false | |
| disabled | boolean | Equivalent to button's disabled property. | |
| icon | ReactNode | ||
| iconWrapperProps | HTMLAttributes<HTMLDivElement> | ||
| keyboardClickKeys | string[] | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| title | ReactNode | ||
| titleWrapperProps | HTMLAttributes<HTMLDivElement> |
StepConnector
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
StepDescription
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| ellipsis | boolean | true | |
| ellipsisTooltipProps | Omit<EllipsisTooltipProps, "children"> |
Stepper
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| buttonClickable | boolean | ||
| connector | ReactNode | <StepConnector /> | |
| initialValue | number | 0 | |
| onChange | (value: number) => void | ||
| orientation | StepperOrientations | horizontal | |
| size | StepperSizes | medium | |
| value | number | ||
| variant | StepperVariants | basic |