# Status Pipeline A Status Pipeline is a UI component that communicates the progression of a multi-step process. It enables users to easily identify completed, current, and upcoming stages, improving clarity and navigation through sequential workflows. The component is available in horizontal and vertical variants, allowing it to adapt to different layouts and use cases. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-status-pipeline--introduction ## Variants documented in Storybook - Status Pipeline Horizontal: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-status-pipeline--status-pipeline-horizontal - Status Pipeline Vertical: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-status-pipeline--status-pipeline-vertical ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Status Pipeline. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Horizontal — Status pipeline default HTML: ```html ``` React: ```jsx import React from 'react'; const StatusPipelineExample1Demo = () => ( <> {/* Variant: Status Pipeline Horizontal default */} ); export default StatusPipelineExample1Demo; ``` Angular: ```html ``` ### 2. Horizontal — Status pipeline with Label HTML: ```html ``` React: ```jsx import React from 'react'; const StatusPipelineExample2Demo = () => ( <> {/* Variant: Status Pipeline Horizontal With Label */} ); export default StatusPipelineExample2Demo; ``` Angular: ```html ``` ### 3. Horizontal — Status pipeline with below Label HTML: ```html ``` React: ```jsx import React from 'react'; const StatusPipelineExample3Demo = () => ( <> {/* Variant: Status Pipeline Horizontal Below Label */} ); export default StatusPipelineExample3Demo; ``` Angular: ```html ``` ### 4. Horizontal — Status pipeline default (Size S) HTML: ```html ``` React: ```jsx import React from 'react'; const StatusPipelineExample4Demo = () => ( <> {/* Variant: Status Pipeline Horizontal default Size S */} ); export default StatusPipelineExample4Demo; ``` Angular: ```html ``` ### 5. Horizontal — Status pipeline with Label (Size S) HTML: ```html ``` React: ```jsx import React from 'react'; const StatusPipelineExample5Demo = () => ( <> {/* Variant: Status Pipeline Horizontal With Label Size S */} ); export default StatusPipelineExample5Demo; ``` Angular: ```html ``` ### 6. Horizontal — Status pipeline with below Label (Size S) HTML: ```html ``` React: ```jsx import React from 'react'; const StatusPipelineExample6Demo = () => ( <> {/* Variant: Status Pipeline Horizontal Below Label Size S */} ); export default StatusPipelineExample6Demo; ``` Angular: ```html ``` ### 7. Introduction — Introduction HTML: ```html
Components

Status Pipeline

A Status Pipeline is a UI component that communicates the progression of a multi-step process. It enables users to easily identify completed, current, and upcoming stages, improving clarity and navigation through sequential workflows. The component is available in horizontal and vertical variants, allowing it to adapt to different layouts and use cases.

Implementation Showcase

Visual demonstration of Status Pipeline variations.

Status Pipeline Horizontal

Default

  • 1
  • 2
  • 3
  • 4
  • 5

With Label

  • 1
    Submitted 30 Apr
  • 2
    Verification Inprogress
  • 3
    Inspection Est. 10 Apr
  • 4
    Decision Est. 18 Apr
  • 5
    Issued Est. 20 Apr

Below Label

  • Submitted 30 Apr
  • Verification In progress
  • 3
    Inspection Est. 10 Apr
  • 4
    Decision Est. 18 Apr
  • 5
    Issued Est. 20 Apr

Status Pipeline Vertical

Default

  • 1
  • 2
  • 3
  • 4
  • 5

With Label

  • 1
    Submitted
  • 2
    Verification
  • 3
    Inspection
  • 4
    Descision
  • 5
    Issued

With Label & Description

  • 1
    Submitted 5 Apr
  • 2
    Verification In progress
  • 3
    Inspection Est. 10 Apr
  • 4
    Descision Est. 16 Apr
  • 5
    Issues Est. 20 Apr

CSS Class Reference

Quickly copy layout and utility classes for Status Pipelines.

Structural Classes

Primary Wrapper Class ux4g-status-pipeline-stepper
Individual Step Wrapper ux4g-status-pipeline-step
Step Indicator Wrapper ux4g-status-pipeline-head
Step Icon Container ux4g-status-pipeline-head-icon
Step Checkmark/Number ux4g-status-pipeline-head-check
Step Label Text ux4g-status-pipeline-label
Step Status Text ux4g-status-pipeline-status

Variant & State Utilities

Horizontal Layout ux4g-status-pipeline-horizontal
Vertical Layout ux4g-status-pipeline-vertical
Small Size Modifier ux4g-status-pipeline-s
Completed Step ux4g-status-pipeline-done
Pending Step ux4g-status-pipeline-step-pending
Active Step Icon ux4g-status-pipeline-head-icon-active
``` React: ```jsx import React from 'react'; const StatusPipelineExample7Demo = () => ( <>
Components

Status Pipeline

A Status Pipeline is a UI component that communicates the progression of a multi-step process. It enables users to easily identify completed, current, and upcoming stages, improving clarity and navigation through sequential workflows. The component is available in horizontal and vertical variants, allowing it to adapt to different layouts and use cases.

Implementation Showcase

Visual demonstration of Status Pipeline variations.

Status Pipeline Horizontal

Default

  • 1
  • 2
  • 3
  • 4
  • 5

With Label

  • 1
    Submitted 30 Apr
  • 2
    Verification Inprogress
  • 3
    Inspection Est. 10 Apr
  • 4
    Decision Est. 18 Apr
  • 5
    Issued Est. 20 Apr

Below Label

  • Submitted 30 Apr
  • Verification In progress
  • 3
    Inspection Est. 10 Apr
  • 4
    Decision Est. 18 Apr
  • 5
    Issued Est. 20 Apr

Status Pipeline Vertical

Default

  • 1
  • 2
  • 3
  • 4
  • 5

With Label

  • 1
    Submitted
  • 2
    Verification
  • 3
    Inspection
  • 4
    Descision
  • 5
    Issued

With Label & Description

  • 1
    Submitted 5 Apr
  • 2
    Verification In progress
  • 3
    Inspection Est. 10 Apr
  • 4
    Descision Est. 16 Apr
  • 5
    Issues Est. 20 Apr

CSS Class Reference

Quickly copy layout and utility classes for Status Pipelines.

{/* Structural Classes */}

Structural Classes

Primary Wrapper Class ux4g-status-pipeline-stepper
Individual Step Wrapper ux4g-status-pipeline-step
Step Indicator Wrapper ux4g-status-pipeline-head
Step Icon Container ux4g-status-pipeline-head-icon
Step Checkmark/Number ux4g-status-pipeline-head-check
Step Label Text ux4g-status-pipeline-label
Step Status Text ux4g-status-pipeline-status
{/* Variant & State Utilities */}

Variant & State Utilities

Horizontal Layout ux4g-status-pipeline-horizontal
Vertical Layout ux4g-status-pipeline-vertical
Small Size Modifier ux4g-status-pipeline-s
Completed Step ux4g-status-pipeline-done
Pending Step ux4g-status-pipeline-step-pending
Active Step Icon ux4g-status-pipeline-head-icon-active
); export default StatusPipelineExample7Demo; ``` Angular: ```html
Components

Status Pipeline

A Status Pipeline is a UI component that communicates the progression of a multi-step process. It enables users to easily identify completed, current, and upcoming stages, improving clarity and navigation through sequential workflows. The component is available in horizontal and vertical variants, allowing it to adapt to different layouts and use cases.

Implementation Showcase

Visual demonstration of Status Pipeline variations.

Status Pipeline Horizontal

Default

  • 1
  • 2
  • 3
  • 4
  • 5

With Label

  • 1
    Submitted 30 Apr
  • 2
    Verification Inprogress
  • 3
    Inspection Est. 10 Apr
  • 4
    Decision Est. 18 Apr
  • 5
    Issued Est. 20 Apr

Below Label

  • Submitted 30 Apr
  • Verification In progress
  • 3
    Inspection Est. 10 Apr
  • 4
    Decision Est. 18 Apr
  • 5
    Issued Est. 20 Apr

Status Pipeline Vertical

Default

  • 1
  • 2
  • 3
  • 4
  • 5

With Label

  • 1
    Submitted
  • 2
    Verification
  • 3
    Inspection
  • 4
    Descision
  • 5
    Issued

With Label & Description

  • 1
    Submitted 5 Apr
  • 2
    Verification In progress
  • 3
    Inspection Est. 10 Apr
  • 4
    Descision Est. 16 Apr
  • 5
    Issues Est. 20 Apr

CSS Class Reference

Quickly copy layout and utility classes for Status Pipelines.

Structural Classes

Primary Wrapper Class ux4g-status-pipeline-stepper
Individual Step Wrapper ux4g-status-pipeline-step
Step Indicator Wrapper ux4g-status-pipeline-head
Step Icon Container ux4g-status-pipeline-head-icon
Step Checkmark/Number ux4g-status-pipeline-head-check
Step Label Text ux4g-status-pipeline-label
Step Status Text ux4g-status-pipeline-status

Variant & State Utilities

Horizontal Layout ux4g-status-pipeline-horizontal
Vertical Layout ux4g-status-pipeline-vertical
Small Size Modifier ux4g-status-pipeline-s
Completed Step ux4g-status-pipeline-done
Pending Step ux4g-status-pipeline-step-pending
Active Step Icon ux4g-status-pipeline-head-icon-active
``` ### 8. Vertical — Status pipeline Default HTML: ```html ``` React: ```jsx import React from 'react'; const StatusPipelineExample8Demo = () => ( <> {/* Variant: Status Pipeline Vertical default */} ); export default StatusPipelineExample8Demo; ``` Angular: ```html ``` ### 9. Vertical — Status pipeline Default (Size S) HTML: ```html ``` React: ```jsx import React from 'react'; const StatusPipelineExample9Demo = () => ( <> {/* Variant: Status Pipeline Vertical default Size S */} ); export default StatusPipelineExample9Demo; ``` Angular: ```html ``` ### 10. Vertical — Status pipeline vertical with label HTML: ```html ``` React: ```jsx import React from 'react'; const StatusPipelineExample10Demo = () => ( <> {/* Variant: Status Pipeline Vertical With Label */} ); export default StatusPipelineExample10Demo; ``` Angular: ```html ``` ### 11. Vertical — Status pipeline vertical with label (Size S) HTML: ```html ``` React: ```jsx import React from 'react'; const StatusPipelineExample11Demo = () => ( <> {/* Variant: Status Pipeline Vertical With Label Size S */} ); export default StatusPipelineExample11Demo; ``` Angular: ```html ``` ### 12. Vertical — Status pipeline vertical with label and description HTML: ```html ``` React: ```jsx import React from 'react'; const StatusPipelineExample12Demo = () => ( <> {/* Variant: Status Pipeline Vertical With Label And Description */} ); export default StatusPipelineExample12Demo; ``` Angular: ```html ``` ### 13. Vertical — Status pipeline vertical with label and description (Size S) HTML: ```html ``` React: ```jsx import React from 'react'; const StatusPipelineExample13Demo = () => ( <> {/* Variant: Status Pipeline Vertical With Label And Description Size S */} ); export default StatusPipelineExample13Demo; ``` Angular: ```html ``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.