07 · Component
Bấm vào thấy có lực
Mọi demo chỉ dùng token của design-system.json — đổi theme, component tự đổi theo.
Nút
Tối đa 1 nút nhấn mạnh nhất mỗi trang. Vùng chạm ≥ 44 px.
Bốn cấp
interactive: true · levels: primary/secondary/ghost/danger · sizes: sm/md/lg · states: default/hover/focusVisible/active/disabled/loading/done · emphasisMaxPerPage: 1 · radius: md · note: Nút chính đỏ son; loading = sợi chỉ chạy vòng; done = mũi chỉ tích
Ba cỡ
interactive: true · levels: primary/secondary/ghost/danger · sizes: sm/md/lg · states: default/hover/focusVisible/active/disabled/loading/done · emphasisMaxPerPage: 1 · radius: md · note: Nút chính đỏ son; loading = sợi chỉ chạy vòng; done = mũi chỉ tích
Trạng thái
Bấm để xem đang gửi → đã xong.
interactive: true · levels: primary/secondary/ghost/danger · sizes: sm/md/lg · states: default/hover/focusVisible/active/disabled/loading/done · emphasisMaxPerPage: 1 · radius: md · note: Nút chính đỏ son; loading = sợi chỉ chạy vòng; done = mũi chỉ tích
Chip lựa chọn
Bạn quan tâm điều gì trước?
interactive: true · states: default/hover/focusVisible/active/disabled · use: lọc cỡ áo, chất lụa, chọn lịch lớp nhuộm
Hộp thông tin
Dải màu bên trái cho biết loại tin. Hộp lời nhân vật dùng khi cần giọng ấm thay cho thông báo khô.
Mỗi sợi tơ đều có quê — để mình kể bạn nghe nhé.
types: info/tip/success/warning/danger · character: true · note: Lời nhân vật: Tằm Tơ kể về chất lụa, Kim Chỉ nhắc số đo
Phản hồi
Thông báo nổi (toast)
Thanh đếm giờ ở đáy, rê vào thì dừng.
interactive: true · states: default/hover/focusVisible/active/disabled · timerMs: 5000 · pauseOnHover: true · ariaLive: polite
Hộp thoại
Rèm mờ, giữ tiêu điểm bên trong, Esc để đóng, trả tiêu điểm về nút mở.
interactive: true · states: default/hover/focusVisible/active/disabled · escCloses: true · returnsFocus: true
Thanh phán quyết
Trượt lên sau mỗi câu trả lời, có con dấu.
kinds: vừa/cần chỉnh · stamp: con dấu tròn chỉ vàng · example: Vai vừa — chỉ cần nới eo 1 cm
Nhập liệu
Nhãn luôn hiện, gợi ý bên dưới, lỗi nói cách sửa và có ví dụ.
interactive: true · states: default/hover/focusVisible/active/disabled · label: Vòng eo (cm) · help: Đo sát người, qua rốn, thở bình thường · error: Số đo cần từ 50 đến 120 cm — ví dụ: 68
Tiến độ
Thanh
Đơn may · thử áo · 3/4
Bậc
- Bước 1
- Bước 2
- Bước 3
- Bước 4
- Bước 5
Vòng
Chuỗi ngày
- T2
- T3
- T4
- T5
- T6
- T7
- CN
Lộ trình
steps: Chọn lụa/Lấy số đo/Thử áo/Nhận áo · example: Lộ trình may đo 5 ngày