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
Ba cỡ
interactive: true · levels: primary/secondary/ghost/danger · sizes: sm/md/lg · states: default/hover/focusVisible/active/disabled/loading/done · emphasisMaxPerPage: 1
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
Chip lựa chọn
Bạn quan tâm điều gì trước?
interactive: true · states: default/hover/focusVisible/active/disabled/selected
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ô.
Từ từ thôi, bột ủ đủ thì bánh mới nở.
types: tip/caution/done/note/heat · character: true · characterLines: [object Object]
Phản hồi
Thông báo nổi (toast)
Thanh đếm giờ ở đáy, rê vào thì dừng.
timer: true · 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ở.
focusTrap: true · escCloses: true · returnFocus: true
Thanh phán quyết
Trượt lên sau mỗi câu trả lời, có con dấu.
types: correct/wrong · stamp: true · labels: [object Object]
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/error · label: true · help: true · errorWithExample: true · errorExample: Số điện thoại cần 10 số, ví dụ 0912 345 678
Tiến độ
Thanh
Món nhà cơ bản · 4/8
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
interactive: true · states: default/hover/focusVisible/active/disabled/locked/done