Progress Indicator

Progress Indicators show users which step of a multi-step process they are currently viewing.

  • Usage
  • Configuration
  • Examples

The Progress Indicator shows users which step they're on within a larger process. Progress Indicators are helpful for more complex tasks or tasks that have distinct phases (e.g. planning an event for a film opening might include creating the event, selecting a venue, sending invitations). Because the Progress Indicator outlines the entire process, users can easily see what needs to occur to complete the task, increasing usability and user trust.

Anatomy

  1. First step (completed)

  2. Second step (selected)

  3. Third step (to do)

  4. Card background

  5. Step label

Best practices

  • Use the Progress Indicator for processes that are composed of 3 or more distinct steps.
  • Clearly indicate the status of each step with intuitive icons (e.g. a "complete" checkbox for the final step). However, combining icons and text can add clutter to the component, so add icons to the Progress Indicator only when they help to meaningfully distinguish the steps from one another.
  • Position the Progress Indicator below the Screen Header and above other content.

Do

Use Progress Indicators for processes with three or more steps.

Don't

Don't use a Progress Indicator for two-step processes.

Common patterns

With Screen Header

Position the Progress Indicator below the Screen Header, above the rest of the content.

Properties

  • Place Label Below Icon checkbox – Optional. If selected, the step label displays below the step icon. If not selected, the label displays to the right of the step icon.
  • Steps section – Required. A section of properties used to configure the steps in the Progress Indicator:
    • Label field – Optional. The label that displays for the step.
    • Step Is Completed – Required. Internal only.
    • State field – Required. Internal only.
    • Icon field – Optional. The UI icon that displays for the step. If no icon is provided, numerals are used.
    • Order field – Optional. The order to display the steps in (determining the numerical order of each step, beginning with zero).
  • Visibility Permission field – Optional. The user's permission to access the component. If a user is not assigned a role that includes this permission, they cannot view or interact with the component.
  • Visibility Permission Not Assigned drop-down – Optional. If the user does not have permission to access the component, specifies whether to hide or disable it:
    • Hide – The component is hidden.
    • Disable – The component is visible but not cannot be interacted with.

Emitted events

  • On Step Load – The step appears active when the screen displays.
  • On Step Complete – The user meets the criteria to complete a step and selects the button to continue to the next step.

Functions

  • Set Step State – When invoked in an event, sets the state of the step (i.e. inactive, active, or completed).
  • Get Number Of Steps – When invoked in an event, returns the total number of steps.
  • Get Step State – When invoked in an event, returns the current state of the step (i.e. inactive, active, or complete).

With icon and label

  • Place Label Below Icon selected.
  • Steps:
    • Label included.
    • Icon included.
    • Order included.