Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Stepper number

v.1.0.0 | Saturn
Healthy
StorybookFigma

Components

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Bar
Required
The bar width is fixed and the full width of the component will depend on the number of steps.

2

Bullet icon
Complete step.

3

Bullet number
Current step.

4

Bullet number disabled
Next step.

States

Default active

  • Active state communicates a component or element is being active.

    • Default completed

  • Completed status communicates that the process step was successful.

    • Default non completed

  • The non completed state is found in the steps following the current one and they communicate that the next step is disabled until the current one is completed.

    • Behaviour

    • Limit number steps

    Limit the number of tabs items to improve usability. The process is simplified between 3 to 6 steps. If more than 7 steps are need is better to use a progress bar component.

    These specifications are for horizontal and vertical variables.

    Foo

    • Number steps

    The component is not flexible and its width will depend on the number of steps displayed, with 6 being the maximum number of steps. Therefore the distance between bullets will always be the same.

    These specifications are for horizontal and vertical variables.

    Foo

    • Mobile steps - width

    From 2 steps to 3 steps The component is not flexible and its width will be determined by the number of steps shown, therefore the distance between bullets will always be the same.

    After 4 steps the maximum width will be 288px, thus the distance between bullets is reduced to fit.

    From 2 steps to 3 steps, the width is determined by the number of steps.

    Foo

    From steps 4 to 6 they will reach the maximum width of 288 px (thus the distance between bullets is reduced).

    Foo

    • Limit number steps

    Limit the number of tabs items to improve usability. The process is simplified between 3 to 6 steps. If more than 7 steps are need is better to use a progress bar component.

    These specifications are for horizontal and vertical variables.

    Foo

    Desktop

    Space of respect

  • These are the spaces of respect that must be followed in this component of stepper number.

    • Desktop and tablet

    Space of respect

  • These are the spaces of respect that must be followed in this component of stepper number.

    • iOS and Android

    Space of respect

  • These are the spaces of respect that must be followed in this component of stepper number.

    • Layout

    Desktop

    Left justified component

    In desktop we will use the vertical variable and we will justify it to the left respecting the spaces already commented in the layout section.

    Foo

    Tablet

    Centered component

    On tablet, the component does not adapt to the parent container, but keeps its width depending on the number of steps and remains centered on the screen.

    Foo

    Mobile

    Centered component

    In mobile the component does not adapt to the parent container until it reaches 4 steps, from 4 to 6 steps the width of the component adapts to the parent container always respecting the side margins.

    Foo

    Do's and dont's

    Foo

    Do’s

    The width of the component is maintained regardless of its parent container,the distance between the bullets will always be the same.

    Foo

    Don’t

    The width will never be adapted to the parent container nor will the distance between bullets be modified.

    Foo

    Do’s

    The processes must be simplified in a maximum of 6 steps.

    Foo

    Don’t

    Processes should not have more than 6 steps.

    Stepper numberUsage
    Stepper numberCode API