VNR Design System

Steps

A navigation bar that guides users through the steps of a task.

Khi nào sử dụng

Wizard form

Hướng dẫn người dùng qua quy trình đăng ký nhiều bước.

Trạng thái đơn hàng

Hiện tiến trình: Đặt hàng → Xử lý → Giao hàng → Hoàn tất.

Setup Guide

Walk users through initial configuration steps.

Hướng dẫn

Do
  • Đánh dấu rõ bước hiện tại và các bước hoàn thành
  • Cho phép quay lại bước trước khi có thể
Don't
  • Dùng quá nhiều bước (trên 7) — hãy gộp lại
  • Bỏ qua bước mà không giải thích cho người dùng

Basic

Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

Small Size

Finished
2
In Progress
3
Waiting

Vertical

Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

With Status

Finished
Error
Something went wrong.
3
Waiting