Step progress

The head of a multi-step flow — a sign-up, a profile to fill: back, segments that fill, the position in words.

Web + MobileBetaNavigation

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. the native apps: Yasakia (PY4), Yororis (PYO2), Orochia mobile (PS6), Orazaka mobile: the head of their sign-up and onboarding flows.

When to use

The onboarding of a dating app: name, birth date, photos, interests, location.
A checkout in several steps.

When not to use

For the steps of a running process.Use instead: Stepper
For a first launch's promises.Use instead: Onboarding

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { StepProgress } from "@krizaka/ui/step-progress";

Examples

Step 2 of 5, back and skip.

Props

The head of a sign-up or a profile to fill: back, segments that fill, the position in words.

Prop	Type	Default	Description
`label`required	`(step: number, total: number) => string`	—	The position in words: `(n, total) => "Step " + n + " of " + total` — passed translated.
`step`required	`number`	—	The current step, from 1.
`total`required	`number`	—	How many steps.
`back`	`ReactNode`	—	The back link or button (a `Button`), at the left.
`className`	`string`	—	Classes merged on the root.
`trailing`	`ReactNode`	—	At the right: a Skip link.

Accessibility

A progressbar named and valued by the position in words.

Best practices

Five steps or fewer; let people skip what is optional.
Keep the position in words (label).

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub