Skip to main content Skip to docs navigation
View on GitHub

Progress

Visual indicators that show the completion status of tasks, loading states, or multi-step processes.

On this page
This documentation is a work in progress and may contain incomplete or outdated information. If you have any feedback or suggestions, please open an issue on GitHub.

Props

Configurable properties that control the appearance, behavior, and functionality of progress components for task completion tracking and user feedback management.

Progress Bar

Properties that define the visual state and completion tracking behavior of linear progress indication elements within progress interfaces.

Progress example image Progress example image

state variant

Controls the progress completion state and visual feedback of the progress bar element based on task advancement and completion status.

  • current-state

Progress Step

Properties that define the visual state and completion tracking behavior of individual step milestone elements within progress sequences.

Progress example image Progress example image

state variant

Controls the completion state and visual feedback of the progress step element based on task advancement and milestone status.

  • next
  • current
  • past

has-label boolean

type:
thumb

Controls the visibility of text label content that provides step identification and contextual information within progress step elements.

  • true
  • false

has-prev boolean

type:
thumb

Controls the visibility of preceding connection elements that link the current step to previous milestones within the progress sequence.

  • true
  • false

has-next boolean

type:
thumb

Controls the visibility of following connection elements that link the current step to subsequent milestones within the progress sequence.

  • true
  • false

Progress Flow

Properties that define the visual state and layout configuration of complete progress tracking systems that combine multiple step elements within workflow interfaces.

Progress example image Progress example image

step variant

Controls the step configuration and visual treatment of the progress status system based on step complexity and display requirements.

  • current-step

Loading Indicator

Properties that define the visual state and label positioning behavior of indeterminate loading feedback elements within progress interfaces.

Progress example image Progress example image

label variant

Controls the label positioning and text placement approach of the loading indicator element based on layout requirements and information hierarchy.

  • external
  • internal