Progress steps

React v2

Where a reader is in a flow of named stages: four layouts on one Progress namespace. Three types, two orientations, two sizes, nothing interactive.

Demo

hero
  1. Completed
    Your detailsName and email
  2. Current step
    Company detailsWebsite and location
  3. Not started
    Invite your teamStart collaborating
  4. Not started
    Add your socialsAutomatic sharing
Component
type
orientation
size
import { Progress } from "@parentsquare/squarekit-react-v2/progress-steps"; import type { ProgressIconType } from "@/components/application/progress-steps/progress-types"; const steps: ProgressIconType[] = [ { title: "Your details", description: "Name and email", status: "complete", }, { title: "Company details", description: "Website and location", status: "current", }, { title: "Invite your team", description: "Start collaborating", status: "incomplete", }, { title: "Add your socials", description: "Automatic sharing", status: "incomplete", }, ]; <Progress.IconsWithText orientation="horizontal" items={steps} />

In context

in-context
View in a page

Family

family
  1. Completed
    DetailsName and email
  2. Current step
    ShippingWhere to send it
  3. Not started
    PaymentCard or bank
Progress.IconsWithText

Step 3 of 4

  1. Completed
  2. Completed
  3. Current step
  4. Not started
Progress.MinimalIcons
  1. Completed
  2. Completed
  3. Current step
  4. Not started
Progress.MinimalIconsConnected
  1. CompletedDetailsName and email
  2. Current stepShippingWhere to send it
  3. Not startedPaymentCard or bank
Progress.TextWithLine

Types

cells

Three types at both sizes, one step per status.

  1. Completed
    DetailsName and email
  2. Current step
    ShippingWhere to send it
  3. Not started
    PaymentCard or bank
icon, size sm
  1. Completed
    DetailsName and email
  2. Current step
    ShippingWhere to send it
  3. Not started
    PaymentCard or bank
icon, size md
  1. Completed
    DetailsName and email
  2. Current step2
    ShippingWhere to send it
  3. Not started3
    PaymentCard or bank
number, size sm
  1. Completed
    DetailsName and email
  2. Current step2
    ShippingWhere to send it
  3. Not started3
    PaymentCard or bank
number, size md
  1. Completed
    DetailsName and email
  2. Current step
    ShippingWhere to send it
  3. Not started
    PaymentCard or bank
featured-icon, size sm
  1. Completed
    DetailsName and email
  2. Current step
    ShippingWhere to send it
  3. Not started
    PaymentCard or bank
featured-icon, size md

Layouts

cells

Horizontal, size sm

  1. Completed
    Your detailsName and email
  2. Current step
    Company detailsWebsite and location
  3. Not started
    Invite your teamStart collaborating
  4. Not started
    Add your socialsAutomatic sharing
type icon, horizontal, size sm
  1. Completed
    Your detailsName and email
  2. Current step2
    Company detailsWebsite and location
  3. Not started3
    Invite your teamStart collaborating
  4. Not started4
    Add your socialsAutomatic sharing
type number, horizontal, size sm
  1. Completed
    Your detailsName and email
  2. Current step
    Company detailsWebsite and location
  3. Not started
    Invite your teamStart collaborating
  4. Not started
    Add your socialsAutomatic sharing
type featured-icon, horizontal, size sm

Horizontal, size md

  1. Completed
    Your detailsName and email
  2. Current step
    Company detailsWebsite and location
  3. Not started
    Invite your teamStart collaborating
  4. Not started
    Add your socialsAutomatic sharing
type icon, horizontal, size md
  1. Completed
    Your detailsName and email
  2. Current step2
    Company detailsWebsite and location
  3. Not started3
    Invite your teamStart collaborating
  4. Not started4
    Add your socialsAutomatic sharing
type number, horizontal, size md
  1. Completed
    Your detailsName and email
  2. Current step
    Company detailsWebsite and location
  3. Not started
    Invite your teamStart collaborating
  4. Not started
    Add your socialsAutomatic sharing
type featured-icon, horizontal, size md

Vertical

  1. Completed
    Your detailsPlease provide your name and email
  2. Completed
    Company detailsA few details about your company
  3. Current step
    Invite your teamStart collaborating with your team
  4. Not started
    Add your socialsShare posts to your social accounts
type icon, vertical, size sm
  1. Completed
    Your detailsPlease provide your name and email
  2. Completed
    Company detailsA few details about your company
  3. Current step
    Invite your teamStart collaborating with your team
  4. Not started
    Add your socialsShare posts to your social accounts
type icon, vertical, size md

MinimalIcons

Step 3 of 4

  1. Completed
  2. Completed
  3. Current step
  4. Not started
MinimalIcons, type icon, size sm

Step 3 of 4

  1. Completed
  2. Completed
  3. Current step
  4. Not started
MinimalIcons, type icon, size md

Step 3 of 4

  1. Completed
  2. Completed
  3. Current step3
  4. Not started4
MinimalIcons, type number, size sm

Step 3 of 4

  1. Completed
  2. Completed
  3. Current step3
  4. Not started4
MinimalIcons, type number, size md

MinimalIconsConnected

  1. Completed
  2. Completed
  3. Current step
  4. Not started
MinimalIconsConnected, type icon, size sm
  1. Completed
  2. Completed
  3. Current step
  4. Not started
MinimalIconsConnected, type icon, size md
  1. Completed
  2. Completed
  3. Current step3
  4. Not started4
MinimalIconsConnected, type number, size sm
  1. Completed
  2. Completed
  3. Current step3
  4. Not started4
MinimalIconsConnected, type number, size md

TextWithLine, horizontal

  1. CompletedYour detailsPlease provide your name and email
  2. Current stepCompany detailsA few details about your company
  3. Not startedInvite your teamStart collaborating with your team
  4. Not startedAdd your socialsShare posts to your social accounts
TextWithLine, horizontal, size sm
  1. CompletedYour detailsPlease provide your name and email
  2. Current stepCompany detailsA few details about your company
  3. Not startedInvite your teamStart collaborating with your team
  4. Not startedAdd your socialsShare posts to your social accounts
TextWithLine, horizontal, size md

TextWithLine, vertical

  1. CompletedYour detailsPlease provide your name and email
  2. CompletedCompany detailsA few details about your company
  3. Current stepInvite your teamStart collaborating with your team
  4. Not startedAdd your socialsShare posts to your social accounts
TextWithLine, vertical, size sm
  1. CompletedYour detailsPlease provide your name and email
  2. CompletedCompany detailsA few details about your company
  3. Current stepInvite your teamStart collaborating with your team
  4. Not startedAdd your socialsShare posts to your social accounts
TextWithLine, vertical, size md

Content

cells
  1. Completed
    Your detailsName and email
  2. Current step
    Company detailsWebsite and location
  3. Not started
    Invite your teamStart collaborating
three steps, horizontal
  1. Completed
    Your detailsPlease provide your name and email
  2. Current step
    Company detailsA few details about your company
  3. Not started
    Invite your teamStart collaborating with your team
  4. Not started
    Add your socialsShare posts to your social accounts
the column's long supporting text in a horizontal row
  1. CompletedDetailsName and email
  2. Current stepShippingWhere to send it
  3. Not startedPaymentCard or bank
  4. Not startedReviewCheck and confirm
one-word checkout titles on TextWithLine
  1. Completed
    Your details
  2. Completed
    Company details
  3. Current step
    Invite your team
  4. Not started
    Add your socials
empty description, vertical

Behaviour

cells

Connectors

  1. Completed
    Your detailsName and email
  2. Current step
    Company detailsWebsite and location
  3. Not started
    Invite your teamStart collaborating
connector false
  1. Completed
    Your detailsName and email
  2. Current step
    Company detailsWebsite and location
  3. Not started
    Invite your teamStart collaborating
connector on the last item

The number connector

type number, framed at phone width
  1. Completed
    Your detailsName and email
  2. Current step2
    Company detailsWebsite and location
  3. Not started3
    Invite your teamStart collaborating
type number, the page's own width

The minimal label

  1. Completed
  2. Completed
  3. Current step
  4. Not started
text false

Step 2 of 4

  1. Completed
  2. Completed
  3. Not started
  4. Not started
no current step

States

cells

IconOnly

Not started
incomplete, size sm
Current step
current, size sm
Completed
complete, size sm
Not started
incomplete, size md
Current step
current, size md
Completed
complete, size md

NumberOnly

Not started1
incomplete, size sm
Current step2
current, size sm
Completed
complete, size sm
Not started1
incomplete, size md
Current step2
current, size md
Completed
complete, size md

In a row

  1. Completed
    Your detailsName and email
  2. Current step
    Company detailsWebsite and location
  3. Not started
    Invite your teamStart collaborating
type icon: tick, halo, dot
  1. Completed
    Your detailsName and email
  2. Current step2
    Company detailsWebsite and location
  3. Not started3
    Invite your teamStart collaborating
type number: tick, ring, dimmed ring
  1. Completed
    Your detailsName and email
  2. Current step
    Company detailsWebsite and location
  3. Not started
    Invite your teamStart collaborating
type featured-icon: tile, gray glyph, dimmed text
  1. CompletedYour detailsName and email
  2. Current stepCompany detailsWebsite and location
  3. Not startedInvite your teamStart collaborating
TextWithLine: brand bar, brand text, gray bar