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 '@adminjs/design-system'

See:

View Source adminjs-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 adminjs-design-system/src/molecules/stepper/step.tsx, line 102

Type: 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 adminjs-design-system/src/molecules/stepper/step.tsx, line 110