<>Button (nút bấm) là thành phần tương tác chính trong UI, giúp người dùng thực hiện hành động như gửi form, điều hướng trang, xác nhận lệnh, hoặc thao tác với hệ thống.
/Các loại button phổ biến
1. Primary Button (Nút chính) 🔵
✔️ Dùng cho hành động quan trọng nhất trên màn hình.
✔️ Thường có màu sắc nổi bật (VD: Xanh, Đỏ).
✔️ Ví dụ: Nút “Đăng ký”, “Mua ngay”, “Gửi”.
🔹 UI Best Practice:
– Chỉ nên có 1 Primary Button trên một màn hình để tránh gây nhầm lẫn.
2. Secondary Button (Nút phụ) ⚪
✔️ Dùng cho hành động ít quan trọng hơn.
✔️ Thường có màu trung tính hoặc viền (Outline Button).
✔️ Ví dụ: “Hủy”, “Quay lại”, “Tìm hiểu thêm”.
🔹 UI Best Practice:
– Không nên thiết kế Secondary Button nổi bật hơn Primary Button.
3. Tertiary Button (Nút bổ trợ) 🔲
✔️ Dùng cho hành động ít quan trọng nhất.
✔️ Thường chỉ có text hoặc icon, không có viền.
✔️ Ví dụ: “Xem thêm”, “Chỉnh sửa”, “Thêm vào danh sách yêu thích”.
🔹 UI Best Practice:
– Nên kết hợp với biểu tượng (icon) để giúp người dùng hiểu nhanh hơn.
4. Icon Button 🎯
✔️ Là nút chứa icon, không có hoặc có rất ít văn bản.
✔️ Ví dụ:
🗑️ (Nút xóa).
❤️ (Nút yêu thích).
🔄 (Nút làm mới).
🔹 UI Best Practice:
– Chỉ sử dụng khi icon đủ rõ ràng, nếu không, cần thêm tooltip (chú thích khi rê chuột vào).
5. Floating Action Button (FAB) ⚡
✔️ Là nút nổi, thường xuất hiện trên giao diện mobile app.
✔️ Ví dụ:
➕ (Thêm nội dung mới).
✏️ (Chỉnh sửa).
📤 (Chia sẻ).
🔹 UI Best Practice:
– Chỉ sử dụng 1 FAB trên một màn hình để tránh làm rối UI.
6. Toggle Button (Nút bật/tắt) 🔘
✔️ Dùng để chuyển đổi giữa hai trạng thái.
✔️ Ví dụ:
🎵 Bật/Tắt nhạc.
🌙 Chuyển Dark Mode.
🔔 Bật/Tắt thông báo.
🔹 UI Best Practice:
– Cần có hiệu ứng rõ ràng khi chuyển trạng thái (màu sắc, animation…).
/Trạng thái của Button trong UI
– Button có nhiều trạng thái khác nhau tùy vào hành động của người dùng:
1️⃣ Default (Mặc định): Hiển thị bình thường.
2️⃣ Hover (Di chuột vào): Đổi màu hoặc có hiệu ứng nhẹ.
3️⃣ Pressed (Đang nhấn): Màu đậm hơn để báo hiệu phản hồi.
4️⃣ Disabled (Vô hiệu hóa): Màu xám nhạt, không thể nhấn.
5️⃣ Loading (Đang xử lý): Hiển thị vòng xoay hoặc hiệu ứng tải.
/Best Practices khi thiết kế Button
✅ 1. Rõ ràng và dễ hiểu – Văn bản trên nút nên thể hiện rõ hành động (VD: “Đăng ký” thay vì “Tiếp tục”).
✅ 2. Màu sắc dễ nhận diện – Primary Button nên có màu nổi bật hơn Secondary Button.
✅ 3. Kích thước phù hợp – Button nên đủ lớn để người dùng nhấn dễ dàng, đặc biệt trên mobile.
✅ 4. Khoảng cách hợp lý – Không đặt quá sát nhau để tránh nhấn nhầm.
✅ 5. Feedback khi nhấn – Cần có hiệu ứng để người dùng biết nút đã được nhấn.
