Wordmark

Playground

Bật onClick để xem phần tử gốc đổi từ span sang button thật, cùng vành tiêu điểm khi focus bằng bàn phím.

LIVE PREVIEWĐặt lại

++

Phần tử gốc hiện tại: <span>

Brand

Theme

onClick

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

<Wordmark
  src="/api/brand-assets/brand/nexocrew/nexocrew-primary.svg"
  alt="NexoCrew"
/>

Bài toán

Logo ở đầu một trang phải làm ba việc cùng lúc và ba việc đó kéo về ba hướng khác nhau. Nó phải hiển thị một tài sản mà component không được biết đường dẫn — nếu component tự nhúng đường dẫn thì nó chỉ dùng được cho một sản phẩm, và corpus này có năm. Nó phải có chiều cao ổn định giữa các bề mặt. Và trên một số bề mặt nó bấm được để về trang chủ, trên số khác thì không — nhưng một thẻ <img> bấm được mà không phải <button> là một phần tử người dùng bàn phím không tới được. Phần còn lại — chọn phần tử bọc theo việc có hành động hay không — là việc của một tầng trên <img>.

Khi nào sử dụng

Nên dùng

Logo chữ ở đầu cột biểu mẫu, đầu panel kể chuyện, đầu sidebar ứng dụng. Khi caller đã có src và alt từ @nexobox/ui/assets/brand/.... Cả hai ca: logo tĩnh, và logo bấm được để điều hướng.

Khi nào không dùng

Tránh dùng

Dựng từ

Anatomy

Variants

Wordmark không có prop variant. Nó có hai hình dạng render do sự hiện diện của onClick quyết định:

Hệ quả cần biết: ở nhánh bấm được, chuỗi ấy có mặt hai lần trong cây trợ năng — trình đọc màn hình đọc nhãn của nút và bỏ qua nội dung bên trong, nên trong thực tế người dùng nghe nó một lần. Đúng hôm nay, cần kiểm lại nếu alt từng để rỗng.

States

TĨNH

Không con trỏ tay, không vành tiêu điểm, không nằm trong tab order.

BẤM ĐƯỢC, NGHỈ

Con trỏ tay. Tab tới nó để xem vành tiêu điểm khi :focus-visible.

Ảnh không tải được: trình duyệt hiện chữ alt — composite không có fallback riêng. Nhánh bấm được không có trạng thái hover riêng và không áp press-scale. Đó không còn là một khiếm khuyết: DS-018 clause 2 đảo luật cũ của DS-014 clause 16 — "press-scale lên mọi thứ nhấn được" không còn là một luật, token vẫn ở trong corpus nhưng chỉ áp khi chủ sở hữu yêu cầu cho một bề mặt cụ thể — nên không còn luật nào để file này "chưa tuân". Dòng ledger W9.7, từng theo dõi việc "press-scale lên mọi thứ nhấn được" còn pending, đóng lại theo chiều ngược: vì luật biến mất, không vì công việc hoàn thành.

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

Seam — host sở hữu gì

Wordmark không biết logo nào thuộc sản phẩm nào, không điều hướng, và không đọc router. Theo ADR-UI-003 clause 2 nó không fetch, không giữ session, không import gì từ next — và onClick là một callback trần chính vì thế: một trang muốn logo dẫn về trang chủ thì truyền một onClick gọi router của nó, hoặc bọc composite trong Link của mình.

API & triển khai

Design tokens

Wordmark là composite duy nhất trong bảy cái không tham chiếu một token màu hay khoảng cách nào — nó không có nền, không có viền, không có đệm. Ba token nó đọc đều thuộc họ tiêu điểm: --nf-component-focus-width, --nf-component-focus-color, --nf-component-focus-offset. Lỗ hổng đặt tên, ghi ra thay vì che: chiều cao logo là h-10 — 2.5rem trần từ thang Tailwind, không phải token. Corpus không có alias cho "chiều cao logo chữ"; một component.wordmark.height là bản sửa đúng, theo dõi bằng dòng ledger W10.19.

Do / Don't