IxDF UI Kit

“Progress Tracker” Component

Design: zeplin.

A progress tracker is displayed in multi-step flows to let users have an overview of the progress. It displays the total number of steps, where the current step is, as well as which steps are completed.

More than 3 steps

  1. Membership plan
  2. Company information
  3. Tell us about yourself
  4. Select your payment method
  5. Complete your payment

3 steps

  1. Membership plan
  2. Company information
  3. Tell us about yourself

Usage

@include('components.progressTracker', [
    'activeStep' => 2,
    'stepMessages' => [
        'Membership plan',
        'Company information',
        'Tell us about yourself',
    ],
])

Props

  • activeStep (required)
    int

    Number of the step which is active.

  • stepMessages (required)
    array<int, string>

    List of steps messages.