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ô.
Mình đếm răng cùng nhau nhé, nhẹ nhàng thôi!
types: tip/caution/done/note/care · 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
Niềng răng · giai đoạn 3 · 3/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