Version 0.40.0

UI Atoms

Step indicator

You can have 10 steps max but we recommend under 7 steps for a better UX.

<div class="sui-a-step-indicator as--interactive as--step-3">

    <button type="button" class="sui-a-step-indicator__step"></button>

    <button type="button" class="sui-a-step-indicator__step"></button>

    <button type="button" class="sui-a-step-indicator__step"></button>

    <button type="button" class="sui-a-step-indicator__step"></button>

    <button type="button" class="sui-a-step-indicator__step"></button>
    
</div>




Individual steps states

<div class="sui-a-step-indicator as--interactive">

    <button type="button" class="sui-a-step-indicator__step"></button>

    <button type="button" class="sui-a-step-indicator__step as--active"></button>

    <button type="button" class="sui-a-step-indicator__step"></button>

    <button type="button" class="sui-a-step-indicator__step" disabled></button>

    <button type="button" class="sui-a-step-indicator__step" disabled></button>
    
</div>

Validation steps states

<div class="sui-a-step-indicator as--interactive as--step-4">

    <button type="button" class="sui-a-step-indicator__step as--success"><i class="sui-a-icon as--fa-check"></i></button>

    <button type="button" class="sui-a-step-indicator__step as--danger"><i class="sui-a-icon as--fa-warning"></i></button>

    <button type="button" class="sui-a-step-indicator__step as--warning"><i class="sui-a-icon as--fa-warning"></i></button>

    <button type="button" class="sui-a-step-indicator__step as--success"><i class="sui-a-icon as--fa-check"></i></button>

    <button type="button" class="sui-a-step-indicator__step as--success"><i class="sui-a-icon as--fa-check"></i></button>
    
</div>

Validation message

Current step need your attention!
<div class="sui-a-step-indicator as--interactive as--step-3">

    <button type="button" class="sui-a-step-indicator__step as--success"><i class="sui-a-icon as--fa-check"></i></button>

    <button type="button" class="sui-a-step-indicator__step as--success"><i class="sui-a-icon as--fa-check"></i></button>

    <button type="button" class="sui-a-step-indicator__step as--warning"><i class="sui-a-icon as--fa-warning"></i></button>

    <button type="button" class="sui-a-step-indicator__step"></button>

    <button type="button" class="sui-a-step-indicator__step"></button>
    
    <div class="sui-a-step-indicator__message as--warning">
        Current step need your attention!
    </div>
</div>

One step need your attention!
<div class="sui-a-step-indicator as--interactive as--step-4">

    <button type="button" class="sui-a-step-indicator__step as--success"><i class="sui-a-icon as--fa-check"></i></button>

    <button type="button" class="sui-a-step-indicator__step as--success"><i class="sui-a-icon as--fa-check"></i></button>

    <button type="button" class="sui-a-step-indicator__step as--danger"><i class="sui-a-icon as--fa-warning"></i></button>

    <button type="button" class="sui-a-step-indicator__step as--success"><i class="sui-a-icon as--fa-check"></i></button>

    <button type="button" class="sui-a-step-indicator__step"></button>
    
    <div class="sui-a-step-indicator__message as--danger">
        One step need your attention!
    </div>
</div>