Tên gọi các UI Component trên Web

Danh sách được biên dịch từ NameThatUI — bộ lọc Web, sắp xếp Popular — và nhóm lại theo chức năng. Tên component và cột HTML/API giữ nguyên tiếng Anh như NameThatUI.

Vì sao cần biết tên các component?

Khi làm việc với Claude Code, gọi đúng tên component giúp prompt ngắn và chính xác hơn. So sánh hai cách viết:

Prompt mơ hồ

“Làm cái khung hiện lên giữa màn hình, phía sau tối mờ đi, có nút hủy và xóa”

Prompt rõ ràng

“Dùng modal dialog xác nhận xóa, có scrim phía sau, hai nút Cancel và Delete”

Prompt thứ hai giúp Claude chọn đúng component trong thư viện (ví dụ Dialog của shadcn/ui), và bạn cũng dễ kiểm tra kết quả hơn.

Nhóm 1 — Lớp phủ (Overlay)

Những thành phần nổi lên trên nội dung trang.

Tên	Mô tả	HTML/API
Lightbox	Bấm vào ảnh để phóng to, phần trang phía sau bị làm tối	`<dialog>`
Modal Dialog vs. Drawer vs. Sheet	Ba kiểu overlay, phân biệt theo vị trí xuất hiện, phạm vi và độ sâu của tác vụ	`<dialog>`
Popover vs. Dropdown Menu vs. Tooltip	Ba overlay gắn với một phần tử, khác nhau ở cách mở, nội dung bên trong và cách đóng	`popover`
Hover Card	Bản xem trước nhiều thông tin, hiện ra khi rê chuột hoặc focus vào một liên kết; không chặn thao tác	`HoverCard`
Scrim (Backdrop / Overlay)	Lớp bán trong suốt ngăn cách modal với phần trang phía sau	`::backdrop`
Command Palette	Ô tìm kiếm ưu tiên bàn phím (thường mở bằng `⌘K`) để chạy lệnh hoặc chuyển trang	`Command`

Giúp người dùng di chuyển giữa các trang và khu vực.

Tên	Mô tả	HTML/API
Site Header vs. Navigation Bar	Cả dải trên cùng là header; hàng liên kết bên trong nó là nav	`<header>`
Hamburger Menu (Nav Drawer)	Nút ba gạch ngang và navigation panel trượt ra khi bấm	`aria-expanded` + `aria-controls`
The Three Dots (Overflow Menu)	Ba chấm ngang (meatballs), ba chấm dọc (kebab), ba gạch (hamburger) và dấu `…` mang ý nghĩa khác nhau	`<button>`
Tabs	Một hàng nhãn, bấm vào nhãn nào thì vùng nội dung chung đổi theo nhãn đó	`role="tablist"`
Breadcrumbs	Chuỗi liên kết từ trang hiện tại ngược về các trang cấp trên	`<nav>`
Bottom Navigation (Tab Bar)	Hàng 3–5 icon ghim ở đáy màn hình điện thoại để chuyển giữa các khu vực	`UITabBar`
Steps	Các vòng tròn đánh số ở đầu trang checkout hoặc wizard, mỗi vòng là một giai đoạn	`aria-current="step"`
Scrollspy	Danh sách “On this page” tự đánh dấu mục bạn đang đọc	`IntersectionObserver`
Pagination	Các nút số trang bên dưới danh sách — và phiên bản dạng chấm (page control)	`<nav aria-label="pagination">`

Nhóm 3 — Nhập liệu và điều khiển (Inputs & Controls)

Những thành phần người dùng nhập, chọn hoặc kéo thả.

Tên	Mô tả	HTML/API
Form Field	Đủ các phần của một ô nhập: label, placeholder, helper text và dòng error màu đỏ	`<label for>`
Switch vs. Checkbox vs. Radio	Switch cho cài đặt bật/tắt, checkbox cho các lựa chọn độc lập, radio để chọn một trong nhóm	`<input type="checkbox" role="switch">`
Toggle Group (Segmented Control)	Một hàng lựa chọn liền nhau, luôn có một lựa chọn đang được chọn	`ToggleGroup`
Combobox (Autocomplete / Typeahead)	Ô nhập chữ kèm danh sách gợi ý được lọc theo nội dung bạn gõ	`role="combobox"`
Multi-select	Một điều khiển chứa nhiều giá trị: dropdown có checkbox, ô chứa chip, hoặc transfer list hai cột	`<select multiple>`
Date Picker	Calendar nhỏ bật ra từ ô nhập ngày — kèm dải tô sáng khi chọn khoảng ngày (range)	`<input type="date">`
Sign-in Form	Các phần có tên riêng của form đăng nhập: icon con mắt, dòng “OR”, các nút “Continue with…”	`autocomplete="current-password"`
Drag & Drop	Handle, preview và dấu hiệu vị trí thả trong thao tác kéo thả	`ondrop`
Resize Handle (Size Grip)	Ba vạch chéo ở góc ô văn bản, kéo để phóng to	`resize`

Nhóm 4 — Phản hồi và trạng thái (Feedback & Status)

Báo cho người dùng biết chuyện gì đang xảy ra.

Tên	Mô tả	HTML/API
Toast (Snackbar)	Tin nhắn ngắn, không chặn thao tác, hiện ra sau một hành động (ví dụ “Đã lưu thay đổi”)	`role="status"`
Inline Alert vs. Callout vs. Banner	Ba kiểu thông báo nằm trong trang, phân biệt theo vị trí; không kiểu nào là toast	`<Alert severity="warning">`
Progress Ring vs. Spinner vs. Progress Bar	Spinner nghĩa là “chờ”; progress ring và progress bar cho biết đã xong bao nhiêu	`<progress>`
Skeleton vs. Spinner	Hai kiểu báo đang tải: skeleton khi biết trước bố cục, spinner khi không rõ thời gian chờ	`aria-busy="true"`
Empty State	Hướng dẫn hiển thị khi màn hình chưa có dữ liệu (ví dụ “Chưa có dự án nào” + nút tạo mới)	`<section>`
Status Dot (Presence Indicator)	Chấm tròn màu nhỏ trên avatar hoặc dòng danh sách: online, away, busy, live	`<PresenceBadge status="available" />`
Focus Ring	Đường viền chỉ ra điều khiển đang được chọn khi bạn dùng bàn phím	`:focus-visible`

Phân biệt nhanh: Toast và Alert

Toast tự xuất hiện rồi tự biến mất sau vài giây, nổi ở góc màn hình, không chiếm chỗ trong bố cục.
Inline Alert / Callout / Banner nằm cố định trong trang cho đến khi người dùng đóng hoặc vấn đề được giải quyết.

Nhóm 5 — Hiển thị dữ liệu (Data Display)

Cách trình bày thông tin cho người dùng xem.

Tên	Mô tả	HTML/API
Card	Khối chữ nhật gồm media, title, body và footer — mỗi phần đều có tên riêng	`<Card>`
Data Table (Table View)	Các bản ghi xếp theo hàng và cột; bấm tên cột để sắp xếp	`<table>`
Badge vs. Chip vs. Pill vs. Tag	Các nhãn nhỏ, phân biệt theo ý nghĩa, hình dạng và khả năng tương tác	`Badge`
Avatar Group	Các avatar tròn chồng lên nhau, có viền ngăn cách và `+N` ở cuối	`AvatarGroup`
Timeline	Đường dọc với các chấm, mỗi chấm là một sự kiện có ngày giờ, theo thứ tự xảy ra	`<Timeline>`
Chat Bubble (Message Bubble)	Khung bo tròn bao quanh một tin nhắn; tin của bạn một bên, của người kia bên còn lại	`chat-bubble`
Accordion (Disclosure)	Các mục xếp chồng, bấm tiêu đề để mở rộng hoặc thu gọn nội dung	`<details>`
Carousel	Dải slide chuyển qua lại bằng nút mũi tên hoặc các chấm nhỏ	`aria-roledescription="carousel"`
Truncation (Ellipsis & Line Clamp)	Chữ bị cắt và thay bằng `…` — ở cuối dòng, sau N dòng, hoặc ở giữa	`text-overflow: ellipsis`
Divider vs. Separator vs. Rule	Cùng một đường kẻ mảnh nhưng có thể dùng để ngắt chủ đề, tách các điều khiển, hoặc chỉ để trang trí	`<hr>`

Nhóm 6 — Bố cục (Layout)

Cách sắp xếp các khối trên trang.

Tên	Mô tả	HTML/API
Bento Grid	Một grid với các tile kích thước khác nhau, xếp khít như hộp cơm bento	`display: grid` + `grid-column: span 2`
Masonry Layout (Pinterest Grid)	Các card cao thấp khác nhau xếp vào cột, không để khoảng trống giữa các hàng	`columns`
Sticky vs. Fixed Positioning	Hai cách giữ một phần tử luôn hiển thị khi cuộn, khác nhau ở containing block	`position: sticky`

Nhóm 7 — Chuyển động và hiệu ứng (Motion & Effects)

Hiệu ứng làm giao diện sống động hơn.

Tên	Mô tả	HTML/API
Marquee	Nội dung tự cuộn ngang theo vòng lặp vô tận (thường dùng cho dải logo đối tác)	`animation` + `@keyframes translateX`
Text Scramble (Decode Effect)	Các ký tự ngẫu nhiên nhảy liên tục rồi dừng lại thành chữ thật	`ScrambleTextPlugin`
Spring Animation	Chuyển động mô phỏng vật lý: vượt quá đích một chút rồi dừng lại	`transition={{ type: "spring", stiffness, damping }}`
Easing (Timing Function)	Cách tốc độ thay đổi trong một chuyển động — quyết định chuyển động trông mượt hay cứng	`transition-timing-function`
Parallax Scrolling	Các lớp cuộn với tốc độ khác nhau — nền chậm hơn nên tạo cảm giác chiều sâu	`animation-timeline: scroll()`

Dùng tên component trong prompt

Khi bạn đã biết tên, ghép chúng lại để mô tả giao diện:

Tạo trang danh sách dự án:
- Site header có breadcrumbs ở dưới
- Data table với cột Tên, Trạng thái (dùng badge), Ngày tạo; có pagination
- Khi chưa có dự án, hiện empty state với nút "Tạo dự án"
- Bấm kebab menu ở mỗi hàng mở dropdown menu: Đổi tên, Xóa
- Xóa thì mở modal dialog xác nhận; xóa xong hiện toast "Đã xóa dự án"
- Khi đang tải dữ liệu, hiện skeleton thay cho bảng

Không nhớ tên một component? Mô tả hình dáng hoặc vị trí của nó trên ô tìm kiếm của NameThatUI (ví dụ “the dots under the slideshow”) để tra tên chuẩn.

Tổng quan

Làm việc với Claude

Tạo tài khoản và thiết lập

Kiến thức nền tảng

Công nghệ

Kiến trúc phần mềm

Thực chiến

Tên gọi các UI Component trên Web

Vì sao cần biết tên các component?

Prompt mơ hồ

Prompt rõ ràng

Nhóm 1 — Lớp phủ (Overlay)

Nhóm 2 — Điều hướng (Navigation)

Nhóm 3 — Nhập liệu và điều khiển (Inputs & Controls)

Nhóm 4 — Phản hồi và trạng thái (Feedback & Status)

Nhóm 5 — Hiển thị dữ liệu (Data Display)

Nhóm 6 — Bố cục (Layout)

Nhóm 7 — Chuyển động và hiệu ứng (Motion & Effects)

Dùng tên component trong prompt

​Vì sao cần biết tên các component?

Prompt mơ hồ

Prompt rõ ràng

​Nhóm 1 — Lớp phủ (Overlay)

​Nhóm 2 — Điều hướng (Navigation)

​Nhóm 3 — Nhập liệu và điều khiển (Inputs & Controls)

​Nhóm 4 — Phản hồi và trạng thái (Feedback & Status)

​Nhóm 5 — Hiển thị dữ liệu (Data Display)

​Nhóm 6 — Bố cục (Layout)

​Nhóm 7 — Chuyển động và hiệu ứng (Motion & Effects)

​Dùng tên component trong prompt

Vì sao cần biết tên các component?

Nhóm 1 — Lớp phủ (Overlay)

Nhóm 2 — Điều hướng (Navigation)

Nhóm 3 — Nhập liệu và điều khiển (Inputs & Controls)

Nhóm 4 — Phản hồi và trạng thái (Feedback & Status)

Nhóm 5 — Hiển thị dữ liệu (Data Display)

Nhóm 6 — Bố cục (Layout)

Nhóm 7 — Chuyển động và hiệu ứng (Motion & Effects)

Dùng tên component trong prompt