Component / 066 / NEXOFRAME

ReasonRemedyRow

Mẫu chuẩn

Một dòng nói vì sao một việc không chạy được, kèm đúng một hành động để gỡ. Icon cộng chữ mang tone; không bao giờ chỉ màu.

Composite tầng 2Dựng từ Button4 toneMột remedy

Playground

Kênh Facebook mất kết nối

Tone failed.

import { ReasonRemedyRow } from "@nexobox/ui";

<ReasonRemedyRow
  tone="failed"
  reason="Kênh Facebook mất kết nối"
  remedy={{ label: "Kết nối lại", onClick: openRemedy }}
/>

Tất cả trạng thái

Mọi trạng thái của composite, dựng thật từ @nexobox/ui, theo theme và brand đang chọn ở Playground.

Đang chờ bạn duyệt

12 phút

Quá hạn, đã chuyển cho Anh Tùng

Kênh Facebook mất kết nối

Giá trong bảng giá và FAQ khác nhau

Linh không còn quyền gửi báo giá

Đã dùng hết ngân sách tháng

Chưa rõ tin nhắn đã tới khách chưa

Không có hành động: chỉ nói lý do

Remedy đang chạy

Bài toán

Một nhãn trạng thái mà không nói làm gì tiếp là ngõ cụt. Mọi việc ở trạng thái không thuận phải có lý do bằng tiếng thường và một hành động, và Crew với CRM phải nói giống hệt nhau cho cùng một việc.

Khi nào sử dụng

Nên dùng

Hàng việc Cần bạn trên tổng quan, đầu trang chi tiết công việc khi bị chặn, danh sách nguồn thông tin cần xử lý.

Khi nào không dùng

Tránh dùng

Không dùng cho	Dùng thay
Hiển thị một trạng thái không cần hành động	Badge hoặc StatusDot
Hai hành động ngang hàng	Dùng hai hàng hoặc mở menu ở host; hàng này chỉ có một remedy
Thông báo lỗi của form	FormError

Dựng từ

Primitive	Vai trong composite
Button	Remedy: secondary sm; link khi có href, nút khi chỉ có onClick, có loading
Icon	Icon tone trong chấm tròn tô nền tone

Anatomy

#	Phần	Ghi chú
1	Chấm icon	Icon theo tone trong hình tròn nền status-*-background
2	Lý do	Một dòng, cắt bằng dấu ba chấm; nội dung đầy đủ ở title
3	Meta	Ngữ cảnh nhỏ như "12 phút"
4	Remedy	Một Button; ẩn khi không có hành động (vẫn phải nói lý do)

Variants

Variant	Hiển thị
`waiting`	Đồng hồ thông tin; việc đang chờ ai đó
`blocked`	Cảnh báo hổ phách; chờ người chỉnh nguồn, quyền hoặc ngân sách
`failed`	Dấu huỷ đỏ; hỏng và cần làm lại
`info`	Thông tin trung tính; đã chuyển hoặc chỉ để biết

States

State	Hành vi	Trợ năng
Default	Như anatomy	Icon ẩn với trợ năng; lý do là nội dung đọc
Remedy pending	Nút loading, disabled	Nút `aria-busy`
Không có remedy	Chỉ lý do	—
Hẹp	Lý do cắt ba chấm, nút không co	Tooltip gốc của title

Bàn phím & trợ năng

Remedy là liên kết (href) hoặc nút; Tab tới đúng một điểm dừng mỗi hàng.

Tone nói bằng icon và chính câu lý do.

Nút cao tối thiểu control-sm; có vùng chạm 44px trên con trỏ thô.

Seam — host sở hữu gì

Composite không biết trạng thái nào ra lý do nào. Host dùng một bảng ánh xạ chung giữa trạng thái và tone, reason, remedy để Crew và CRM cùng một câu.

API & triển khai

Prop	Mặc định	Quy ước
tone	—	"waiting" \| "blocked" \| "failed" \| "info".
reason	—	Một câu bằng tiếng thường.
meta	undefined	Ngữ cảnh nhỏ.
remedy	undefined	{ label, onClick?, href?, pending? }; một hành động.

Design tokens

--nf-semantic-status-{information,warning,danger}-icon, -background, --nf-semantic-surface-raised, --nf-semantic-border-subtle, --nf-foundation-radius-control, --nf-foundation-radius-pill, --nf-foundation-space-*.

Do / Don't

Nên dùng

Lý do bằng tiếng thường, đủ để chọn hành động. Một remedy, động từ rõ (Kết nối lại, Mở bảng giá).

Tránh dùng

Mã lỗi thay cho lý do. Hai nút ngang hàng. Chỉ đổi màu nền để phân biệt tone.