IxDF Design System

“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 type
  2. Company information
  3. Tell us about yourself
  4. Select your payment method
  5. Complete your payment

3 steps

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

Usage

@include('components.progressTracker', [
    'activeStep' => 2,
    'stepMessages' => [
        'Membership type',
        '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.