Components

Step

<Step />

Step represents one of the tab in placed inside Stepper component. You can use it alone or with before-mentioned Stepper.

Usage

import { Step, StepProps } from '@admin-bro/design-system'
See:

View Source admin-bro-design-system/src/molecules/stepper/step.tsx, line 85

Examples

Regular step

Active steps

Active steps

Clickable step

Type Definitions

# OnStepClickHandler(numberopt)

Handler which is invoked when user clicks given step

Parameters:
Name Type Attributes Description
number number | string <optional>

The same number what was passed to a Step

View Source admin-bro-design-system/src/molecules/stepper/step.tsx, line 102

object

# StepProps

Properties:
Name Type Attributes Description
number number | string <optional>

number presented in a circle

completed boolean <optional>

indicates if given step is done

active boolean <optional>

indicates if given step is active

disabled boolean <optional>

turn off any

onClick OnStepClickHandler <optional>

handler which passes a number of the step in an argument

className string <optional>

Optional className

View Source admin-bro-design-system/src/molecules/stepper/step.tsx, line 110