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ừng viên một, nhà sẽ mát.
types: info/caution/success/note/system · character: true · characterMap: [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 · example: [object Object]
Tiến độ
Thanh
Nhà mẫu · phương án sơ bộ · 2/3
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 · steps: Khảo sát nắng gió/Phương án sơ bộ/Bản vẽ thi công/Giám sát/Đo lại sau 3 tháng