Progress Steps Component
Step indicator with text, icon, and line connector variants in horizontal and vertical layouts.
Type: Line
Horizontal & vertical with line connectors
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" },
};
}Type: Dot
Compact circular step markers
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" />Type: Number
Numbered step markers
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="number"
Orientation="horizontal"
Size="md"
CurrentStep="currentStep"
Steps="basicSteps" />Type: Icon
Custom icons per step
Horizontal
Vertical (sm)
Vertical (md)
<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
};
}Pill-buttons (title only)
@* Title only — pills compact, scannable *@
<ProgressSteps Type="buttons"
Size="md"
CurrentStep="currentStep"
Steps="iconSteps" />Pill-buttons (title + description)
@* Title + description — pills taller, more context *@
<ProgressSteps Type="buttons"
Size="md"
ShowDescription="true"
CurrentStep="currentStep"
Steps="iconSteps" />Pill-buttons with click navigation
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
// };
}