Progress Steps Component

Horizontal (sm)

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

Horizontal (md)

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

Vertical (sm)

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

Vertical (md)

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

<ProgressSteps Type="line"
                Orientation="horizontal"
                Size="md"
                CurrentStep="currentStep"
                Steps="basicSteps" />

@* Vertical orientation for sidebar layouts *@
<ProgressSteps Type="line" Orientation="vertical" Size="md"
                CurrentStep="currentStep" Steps="basicSteps" />

@code {
    private int currentStep = 1;

    private List<ProgressSteps.StepItem> basicSteps = new()
    {
        new() { Title = "Your details",    Description = "Name and email" },
        new() { Title = "Company details", Description = "Website and location" },
        new() { Title = "Invite your team",Description = "Start collaborating" },
        new() { Title = "Add your socials",Description = "Automatic sharing" },
    };
}

Horizontal

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

Vertical (sm)

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

Vertical (md)

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

<ProgressSteps Type="dot"
                Orientation="horizontal"
                Size="md"
                CurrentStep="currentStep"
                Steps="basicSteps" />

Horizontal

Your details

Name and email

2

Company details

Website and location

3

Invite your team

Start collaborating

4

Add your socials

Automatic sharing

Vertical (sm)

Your details

Name and email

2

Company details

Website and location

3

Invite your team

Start collaborating

4

Add your socials

Automatic sharing

Vertical (md)

Your details

Name and email

2

Company details

Website and location

3

Invite your team

Start collaborating

4

Add your socials

Automatic sharing

<ProgressSteps Type="number"
                Orientation="horizontal"
                Size="md"
                CurrentStep="currentStep"
                Steps="basicSteps" />

Horizontal

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

Vertical (sm)

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

Vertical (md)

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

<ProgressSteps Type="icon"
                Orientation="horizontal"
                Size="md"
                CurrentStep="currentStep"
                Steps="iconSteps" />

@code {
    private List<ProgressSteps.StepItem> iconSteps = new()
    {
        new() {
            Title = "Your details",
            Description = "Name and email",
            Icon = @<svg viewBox="0 0 24 24">...user icon...</svg>
        },
        // ...more steps
    };
}

Your details

Company details

Invite your team

Add your socials

@* Title only — pills compact, scannable *@
<ProgressSteps Type="buttons"
               Size="md"
               CurrentStep="currentStep"
               Steps="iconSteps" />

Your detailsName and email

Company detailsWebsite and location

Invite your teamStart collaborating

Add your socialsAutomatic sharing

@* Title + description — pills taller, more context *@
<ProgressSteps Type="buttons"
               Size="md"
               ShowDescription="true"
               CurrentStep="currentStep"
               Steps="iconSteps" />

Current step: 2 · Click any pill to jump to that step.

<ProgressSteps Type="buttons"
               Size="md"
               CurrentStep="clickableStep"
               Steps="iconSteps"
               OnStepClick="HandleStepClick" />

@code {
    private int clickableStep = 2;

    private void HandleStepClick(int index)
    {
        clickableStep = index;
    }

    // Per-step gating: only completed steps clickable
    // private List<ProgressSteps.StepItem> iconSteps = new()
    // {
    //     new() { Title = "...", IsClickable = true,  Icon = ... },
    //     new() { Title = "...", IsClickable = false, Icon = ... }, // locked
    // };
}

Progress Steps Component

Type: Line

Type: Dot

Type: Number

Type: Icon