Yugen UI

Button kích hoạt một hành động hoặc sự kiện duy nhất.

ButtonGroup ghép các nút liền kề thành một khối điều khiển thống nhất cho những hành động cùng nhóm.

CompoundButton là nút lớn có icon và hai dòng chữ: nhãn chính và một dòng mô tả giải thích hành động.

Link dẫn người dùng tới trang, tài nguyên hoặc vị trí khác, nằm trong đoạn văn hoặc đứng riêng.

MenuButton là nút có chevron ở cuối, bấm vào để mở một Menu các lựa chọn.

SplitButton cho phép chọn một trong nhiều hành động liên quan: nút chính là hành động trội, các lựa chọn khác nằm trong menu.

ToggleButton là nút có hai trạng thái bật/tắt, dùng để bật hoặc tắt một tuỳ chọn ngay lập tức.

ToggleGroup gom các ToggleButton liên quan để chọn một hoặc nhiều tuỳ chọn trong cùng nhóm.

Toolbar gom các lệnh thường dùng thành một thanh ngang hoặc dọc, điều hướng bằng phím mũi tên.

Autocomplete là ô tìm kiếm có gợi ý: gõ để lọc, chọn gợi ý để điền nhanh, hoặc Enter để tìm với nguyên từ khoá.

Calendar hiển thị lưới ngày theo tháng để chọn một ngày, nhiều ngày hoặc một khoảng ngày.

Checkbox cho phép chọn một hoặc nhiều lựa chọn độc lập trong một tập hợp.

ColorPicker chọn màu tuỳ ý: vùng độ bão hoà / độ sáng, thanh sắc độ và độ đục, ô nhập HEX / RGB / HSL.

Combobox kết hợp ô nhập và listbox: gõ để lọc rồi chọn một hoặc nhiều lựa chọn.

DatePicker là ô nhập dạng Fluent mở Calendar trong popover để chọn ngày, hiển thị dd/MM/yyyy.

DateRangePicker có danh sách chọn nhanh khoảng ngày cạnh lịch.

DateTimePicker chọn ngày và giờ trong cùng một popover: lịch ở trên, ô giờ ở dưới.

Dropdown cho phép chọn một lựa chọn từ listbox tuỳ biến mở ra bên dưới ô.

Field gói một control nhập liệu cùng nhãn, dấu bắt buộc, gợi ý và thông báo kiểm tra.

FileUpload là vùng kéo thả kèm danh sách tệp: chọn bằng chuột, bàn phím, kéo thả hoặc dán; tự kiểm tra định dạng, dung lượng, số lượng.

Ghép Field, Input, Select, Checkbox, DatePicker và Button của Yugen với react-hook-form + zod để có form kiểm tra dữ liệu đầy đủ, tiếng Việt, truy cập được.

FormattedInput định dạng số điện thoại, số thẻ và số tiền ngay khi gõ, vẫn giữ vị trí con trỏ.

Input cho phép người dùng nhập và chỉnh sửa văn bản trên một dòng.

InputOTP nhập mã xác thực một lần, mỗi ký tự một ô.

Label đặt tên cho một control để người dùng biết cần nhập hoặc chọn gì.

MonthPicker và YearPicker chọn một tháng hoặc một năm, cùng vỏ và bàn phím với DatePicker.

PasswordInput là ô nhập mật khẩu có nút hiện / ẩn, nhắc Caps Lock và thước đo độ mạnh tuỳ chọn.

RadioGroup cho phép chọn đúng một lựa chọn trong một tập loại trừ lẫn nhau.

Rating cho phép người dùng chấm điểm bằng sao; RatingDisplay hiển thị điểm chỉ đọc.

SearchBox là ô nhập chuyên cho tìm kiếm, có icon kính lúp và nút xoá nhanh.

Select cho phép chọn một giá trị từ danh sách bằng thẻ select gốc của trình duyệt.

Slider cho phép chọn một giá trị (hoặc khoảng) trong dải liên tục bằng cách kéo thumb.

SpinButton cho phép nhập số và tăng/giảm theo bước bằng nút hoặc bàn phím.

SwatchPicker cho phép chọn một màu (hoặc chất liệu) trong bảng ô mẫu.

Switch bật hoặc tắt một trạng thái, có hiệu lực ngay lập tức.

Tag biểu diễn một thuộc tính, bộ lọc hoặc đối tượng đã chọn; có thể gỡ bỏ hoặc tương tác.

TagPicker cho phép chọn nhiều mục, hiển thị mỗi mục là một Tag ngay trong ô nhập.

Textarea cho phép nhập và chỉnh sửa văn bản dài trên nhiều dòng.

TimePicker là ô nhập kiểu combobox để chọn giờ trong danh sách hoặc gõ tự do.

Breadcrumb cho biết vị trí hiện tại trong cấu trúc phân cấp và cho phép quay lại các cấp cha.

Command là bảng lệnh có ô tìm kiếm, giúp người dùng tìm và chạy lệnh hoặc điều hướng nhanh bằng bàn phím.

ContextMenu hiển thị các lệnh liên quan tới một vùng hoặc phần tử khi người dùng nhấp chuột phải.

Menu hiển thị danh sách lệnh hoặc lựa chọn khi người dùng tương tác với một nút.

Menubar là thanh menu ngang cố định, kiểu ứng dụng desktop, chứa nhóm lệnh Tệp, Sửa, Xem…

Nav là điều hướng dọc của ứng dụng, giúp người dùng chuyển giữa các khu vực chính.

NavigationMenu là menu điều hướng cho header website: link và nút mở bảng thả xuống (mega menu).

Pagination chia nội dung dài thành nhiều trang và cho phép chuyển nhanh giữa các trang.

Stepper cho biết người dùng đang ở bước nào trong một quy trình nhiều bước; Wizard ghép Stepper với nội dung từng bước và nút Quay lại / Tiếp tục.

TabList chuyển đổi giữa các khung nội dung cùng cấp mà không rời trang.

Avatar đại diện cho một người hoặc một thực thể bằng ảnh, chữ cái đầu hoặc icon.

AvatarGroup hiển thị một nhóm người hoặc thực thể bằng các avatar xếp cạnh nhau, chồng lên nhau hoặc chia trong một vòng tròn.

Badge là chỉ báo trực quan truyền đạt một thông tin nhỏ: trạng thái, số lượng hoặc nhãn phân loại.

Carousel trình bày một chuỗi nội dung theo từng slide, điều hướng bằng nút trước / sau, chấm chỉ mục, ảnh thu nhỏ hoặc phím mũi tên.

Citation gắn số nguồn [1] ngay trong câu trả lời; rê chuột hoặc focus để xem nhanh tiêu đề, tên miền và đoạn trích, bấm để mở thẻ và tới link.

CodeBlock hiển thị code với tô màu cú pháp gọn nhẹ tự viết (không Prism / Shiki), số dòng, dòng nhấn mạnh, diff, xuống dòng và nút sao chép.

CounterBadge hiển thị số lượng (thông báo, tin chưa đọc) hoặc một chấm báo có mục mới.

DataGrid là lưới dữ liệu tương tác: sắp xếp, chọn hàng, kéo đổi độ rộng cột và ảo hoá cho hàng chục nghìn hàng.

DescriptionList hiển thị các cặp nhãn / giá trị: chi tiết đơn hàng, hồ sơ, tóm tắt cài đặt.

Image hiển thị ảnh với các tuỳ chọn cách lấp khung, bo góc, viền và đổ bóng; AspectRatio giữ khung đúng tỉ lệ.

Kbd hiển thị phím hoặc tổ hợp phím tắt để hướng dẫn người dùng thao tác bằng bàn phím.

List hiển thị một chuỗi mục liên quan theo chiều dọc, có thể điều hướng bằng bàn phím và chọn một hoặc nhiều mục.

Markdown hiển thị nội dung viết bằng Markdown (bài viết, ghi chú phát hành, mô tả từ CMS) theo kiểu chữ của Prose, an toàn với nội dung không tin cậy.

MessageScroller là vùng cuộn hội thoại biết bám đáy khi có tin mới, báo “N tin nhắn mới” khi bạn đang đọc tin cũ và giữ nguyên vị trí khi tải thêm lịch sử.

Persona ghép Avatar (hoặc chỉ chấm trạng thái) với tên và tối đa ba dòng thông tin phụ về một người.

PresenceBadge cho biết trạng thái hiện diện của một người: có mặt, bận, vắng mặt, ngoại tuyến…

Prose định dạng nội dung dài từ Markdown hoặc CMS: tiêu đề, đoạn văn, danh sách, bảng, code, trích dẫn và ảnh theo thang chữ Yugen.

Quote hiển thị trích dẫn có ghi nguồn — lời chứng thực, trích tài liệu, câu nói trong bài viết.

Stat hiển thị một con số chính kèm mức thay đổi và biểu đồ nhỏ tuỳ chọn.

StreamingMarkdown hiển thị câu trả lời Markdown của AI ngay khi từng token về — không nháy ký hiệu thô, không chèn HTML, và không render lại cả bài mỗi lần có chữ mới.

Table sắp xếp dữ liệu thành hàng và cột để người dùng quét, so sánh và thao tác trên từng bản ghi.

Text hiển thị chữ theo type ramp của Fluent 2, kèm các preset sẵn cho từng vai trò từ Display đến Caption2.

Timeline liệt kê các sự kiện theo thời gian: lịch sử đơn hàng, nhật ký hoạt động, các bước đã qua của một yêu cầu.

Tree hiển thị dữ liệu phân cấp dạng nhánh có thể mở / đóng, như cây thư mục hay danh mục điều hướng.

Một chỗ cho mọi trạng thái của dữ liệu bất đồng bộ — chưa tải, đang tải, có dữ liệu, rỗng, lỗi — với khung xương không nháy và lỗi luôn có lối thoát.

Empty hiển thị trạng thái trống khi chưa có dữ liệu, kèm lời giải thích và hành động tiếp theo.

InfoLabel là nhãn kèm nút thông tin nhỏ, mở Popover giải thích thêm cho trường nhập liệu.

MessageBar truyền đạt thông tin quan trọng về trạng thái của toàn bộ trang hoặc một khu vực.

Thanh tiến trình mảnh màu brand ở mép trên trang: báo ứng dụng đang làm việc khi chuyển route hay tải nền, mà không che nội dung đang đọc.

ProgressBar cho biết tiến độ của một tác vụ đang chạy, dạng xác định (biết phần trăm) hoặc không xác định.

Skeleton là bản phác hình khối của nội dung sắp hiển thị, giúp giảm cảm giác chờ đợi khi tải.

Sonner là thông báo ngắn xếp chồng ở góc màn hình: thông báo mới ở trước, thông báo cũ lùi ra sau, trỏ chuột vào thì xoè ra.

Spinner cho biết hệ thống đang xử lý một tác vụ chưa rõ thời gian hoàn tất.

StatusPage là trang trạng thái cho lỗi HTTP (404, 500, 503…), mất mạng và bản mới; ErrorBoundary hiện nó khi phần con lỗi.

Toast là thông báo ngắn, không chặn thao tác, xuất hiện ở góc màn hình rồi tự biến mất.

Card là bề mặt gom nhóm thông tin và hành động liên quan đến một chủ đề duy nhất.

Dialog là cửa sổ modal yêu cầu người dùng xác nhận hoặc cung cấp thông tin trước khi tiếp tục.

Drawer là bề mặt trượt vào từ cạnh màn hình, chứa điều hướng, bộ lọc hoặc nội dung phụ của trang.

HoverCard hiển thị bản xem trước nội dung phía sau một liên kết khi người dùng trỏ chuột vào.

Popover hiển thị nội dung nổi, có thể tương tác, gắn với một phần tử kích hoạt.

TeachingPopover giới thiệu tính năng mới hoặc hướng dẫn từng bước, gắn ngay cạnh phần tử liên quan.

Tooltip hiển thị thông tin bổ sung ngắn gọn khi người dùng hover hoặc focus vào một phần tử.

Accordion xếp nội dung thành các mục có thể mở rộng / thu gọn để giảm tải thông tin trên trang.

AppShell là khung của ứng dụng: sidebar thu về icon hoặc mở thành Drawer, thanh trên cùng và nội dung chính.

AspectRatio giữ một khung đúng tỉ lệ rộng / cao bất kể chiều rộng — cho video, ảnh, avatar, banner và story.

Collapsible ẩn / hiện một vùng nội dung bằng một nút điều khiển, có chuyển động chiều cao.

Divider là đường kẻ mảnh tách các nhóm nội dung, có thể kèm chữ hoặc icon ở giữa, đầu hoặc cuối.

Overflow thu các item không vừa chiều rộng vào nút menu "…", theo thứ tự ưu tiên.

Resizable chia một vùng thành các panel mà người dùng kéo để đổi kích thước, thu gọn / mở rộng, theo chiều ngang hoặc dọc.

ScrollArea thay thanh cuộn mặc định của trình duyệt bằng thanh cuộn mảnh kiểu Fluent, chỉ hiện khi rê chuột.

Blur chuyển từ nhoè sang rõ; Rotate xoay phần tử từ -90° về vị trí — hai chuyển động presence nhấn mạnh.

Collapse giãn hoặc thu chiều cao (hoặc chiều rộng) của một vùng nội dung một cách mượt mà.

Fade làm phần tử mờ dần vào và ra — chuyển động presence nhẹ nhàng nhất.

Scale phóng phần tử từ 90% lên kích thước thật, kèm mờ dần — hợp với bề mặt nổi nhỏ.

Slide trượt phần tử vào từ một cạnh — start, end, top hoặc bottom.

Stagger cho các phần tử con xuất hiện lần lượt, cách nhau một độ trễ ngắn.

AriaLiveAnnouncer và useAnnounce đọc thông báo động cho người dùng trình đọc màn hình.

useArrowNavigationGroup và useFocusableGroup quản lý focus bằng bàn phím cho nhóm phần tử, như Tabster của Fluent.

Chín hook dùng chung mà chính các component của Yugen UI dùng — trạng thái, màn hình, lưu trữ, phím tắt, đo đạc.

Sortable sắp xếp lại danh sách bằng kéo thả hoặc bàn phím; mỗi bước được đọc cho trình đọc màn hình.

useMediaQuery theo dõi một CSS media query và render lại khi nó đổi — breakpoint, chế độ tối, giảm chuyển động, loại con trỏ.

Cập nhật lạc quan cho danh sách: giao diện đổi ngay khi bấm, gửi lên server phía sau; thất bại thì hoàn tác đúng thay đổi đó và báo bằng toast.

VisuallyHidden ẩn nội dung khỏi màn hình nhưng vẫn để trình đọc màn hình đọc được.

BarChart so sánh độ lớn giữa các danh mục — cột dọc hoặc thanh ngang, nhóm hoặc chồng, có hỗ trợ giá trị âm.

ChatComposer là ô soạn tin tự giãn theo nội dung: Enter để gửi, Shift+Enter để xuống dòng, nút gửi chỉ bật khi có nội dung.

DonutChart cho phần–tổng nhìn nhanh với tối đa 6 lát; phần đuôi tự gộp vào “Khác”, tổng hiển thị ở giữa vòng.

Heatmap tô một ma trận hàng × cột theo độ lớn — tìm mẫu theo giờ/ngày, so sánh nhóm, bảng giữ chân người dùng.

LineChart và AreaChart thể hiện xu hướng theo thời gian hoặc theo chuỗi danh mục, nhiều chuỗi trên một trục.

Hiện loader đúng lúc: không nháy với phản hồi nhanh, không chập chờn với phản hồi chậm — và chỉ phủ đúng vùng đang tải.

NotificationCenter là chuông thông báo kèm số chưa đọc, mở bảng thông báo nhóm theo ngày — Popover trên desktop, bottom sheet trên mobile.

PromptInput là ô soạn prompt đầy đủ cho trợ lý AI: tự giãn, đính kèm bằng nút / kéo thả / dán ảnh, kiểm tra tệp ngay tại chỗ và nút Gửi đổi thành Dừng khi model đang trả lời.

Questionnaire dựng khảo sát hoặc form nhiều bước từ một mảng cấu hình — mỗi màn một câu như Typeform, hoặc tất cả trên một trang.

Reasoning gói phần suy nghĩ của model vào một khối thu gọn: “Đang suy luận…” kèm đồng hồ khi đang chạy, “Đã suy luận trong 12s” khi xong.

ScatterChart cho thấy quan hệ giữa hai đại lượng số — tương quan, cụm và điểm ngoại lai — kèm bong bóng và đường xu hướng khi cần.

Sheet là một overlay thích ứng: panel trượt từ cạnh trên màn hình rộng, bottom sheet kéo được trên điện thoại — cùng một API, cùng một nội dung.

Khung xương dựng sẵn cho đoạn văn, avatar, thẻ, danh sách và bảng — cùng kích thước, bo góc và khoảng cách với component thật.

Đôi khi câu trả lời không phải biểu đồ: StatTile đưa con số lên trước, kèm delta và một sparkline xu hướng nhỏ.

Tour dẫn người dùng qua các phần quan trọng của sản phẩm từng bước: làm tối phần còn lại, khoét sáng đúng phần tử và giải thích bằng TeachingPopover.

Trace hiển thị tiến trình thực thi theo từng bước — agent AI gọi công cụ, CI pipeline, triển khai — để người dùng thấy hệ thống đang làm gì và vì sao.

brush thêm dải tổng quan dưới LineChart / AreaChart để phóng to một giai đoạn mà không mất bối cảnh toàn chuỗi.