Steps

Example

• 1

  Step One

  Step one details

• 2

  Step Two

  Step two details

• 3

  Step Three

  Step three details

• 4

  Step Four

  Step four details

import React from 'react';
import { Steps } from 'chic-ui';

export function Example() {
  return (
    <Steps active={1} type="primary" direction="horizontal">
      <Steps.Step title="Step One" subTitle="Step one details" />
      <Steps.Step title="Step Two" subTitle="Step two details" />
      <Steps.Step title="Step Three" subTitle="Step three details" />
      <Steps.Step title="Step Four" subTitle="Step four details" />
    </Steps>
  );
}

Direction

The step component can have two directions : horizontal or vertical

• 1

  Step One

  Step one details

• 2

  Step Two

  Step two details

• 3

  Step Three

  Step three details

• 4

  Step Four

  Step four details

import React from 'react';
import { Steps } from 'chic-ui';

export function VerticalSteps() {
  return (
    <Steps active={1} type="primary" direction="vertical">
      <Steps.Step title="Step One" subTitle="Step one details" />
      <Steps.Step title="Step Two" subTitle="Step two details" />
      <Steps.Step title="Step Three" subTitle="Step three details" />
      <Steps.Step title="Step Four" subTitle="Step four details" />
    </Steps>
  );
}

Responsive

• 1

  Step One

  Step one details

• 2

  Step Two

  Step two details

• 3

  Step Three

  Step three details

• 4

  Step Four

  Step four details

import React from 'react';
import { Steps } from 'chic-ui';

export function ResponsiveSteps() {
  return (
    <Steps active={1} type="primary" responsive="true">
      <Steps.Step title="Step One" subTitle="Step one details" />
      <Steps.Step title="Step Two" subTitle="Step two details" />
      <Steps.Step title="Step Three" subTitle="Step three details" />
      <Steps.Step title="Step Four" subTitle="Step four details" />
    </Steps>
  );
}

Custom Icon

• Step One

• 2

  Step Two

• 3

  Step Three

• 4

  Step Four

import React from 'react';
import { Steps } from 'chic-ui';

export function IconSteps() {
  return (
    <Steps active={1} type="primary">
      <Steps.Step title="Step One" icon={HomeIcon} />
      <Steps.Step title="Step Two" />
      <Steps.Step title="Step Three" />
      <Steps.Step title="Step Four" />
    </Steps>
  );
}

Steps with Details

• 1

  Step One

  Step one details

• 2

  Step Two

  Step two details

• 3

  Step Three

  Step three details

• 4

  Step Four

  Step four details

import React from 'react';
import { Steps } from 'chic-ui';

export function SubtitleSteps() {
  return (
    <Steps active={1} type="primary">
      <Steps.Step title="Step One" subTitle="Step one details" />
      <Steps.Step title="Step Two" subTitle="Step two details" />
      <Steps.Step title="Step Three" subTitle="Step three details" />
      <Steps.Step title="Step Four" subTitle="Step four details" />
    </Steps>
  );
}

API

import { Steps } from 'chic-ui';

Name	Type	Default	Description
active	number	0	Count of step start from 0
direction	'vertical' | 'horizontal'	'horizontal'	Steps direction
responsive	boolean	true	Change to vertical direction when screen width smaller than 532px
onChange	(active: number) => void		Handles value changes
type	'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'light'	'primary'	Theme type for all steps. Can override this with theme of step
divider	ReactNode		Custom Divider
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component
children	ReactNode		Pass children

Steps.Step

Name	Type	Default	Description
title	string		Title of Step
subTitle	string		Sub title of Step
index	number		Index of Step
activeIndex	number		Index of active Step
icon	ReactNode		Icon of Step
direction	'vertical' | 'horizontal'	'horizontal'	Step direction
onChange	(active: number) => void		Handles value changes
type	'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'light'	'primary'	Theme type for step.
divider	ReactNode		Custom Divider