Skip to content
Paramanu v0.1.0-alpha.0

Steps

Steps display progress through a sequence of numbered stages with visual indicators and connectors.

Basic Usage

Account
Details
import { Steps, Step, StepIndicator, StepConnector, StepContent } from "@paramanu/navigation-react"


export default function App() {
return (
  <Steps>
    <Step status="complete">
      <StepIndicator status="complete">1</StepIndicator>
      <StepContent>Account</StepContent>
    </Step>
    <StepConnector status="complete" />
    <Step status="active">
      <StepIndicator status="active">2</StepIndicator>
      <StepContent>Details</StepContent>
    </Step>
  </Steps>
)
}
<div class="pm-steps pm-steps--md pm-steps--horizontal" role="list" aria-label="Progress">
<div class="pm-steps__step pm-steps__step--complete">
  <div class="pm-steps__indicator pm-steps__indicator--complete" aria-hidden="true">1</div>
  <div class="pm-steps__content">Account</div>
</div>
<div class="pm-steps__connector pm-steps__connector--complete" role="presentation"></div>
<div class="pm-steps__step pm-steps__step--active" aria-current="step">
  <div class="pm-steps__indicator pm-steps__indicator--active" aria-hidden="true">2</div>
  <div class="pm-steps__content">Details</div>
</div>
</div>