Quy chuẩn thiết kế UI/UX

Nút (button)

• Đối với các nút chức năng, sử dụng class btn btn-success. Ví dụ như: Thêm, Sửa, Cấu hình,…
  <a href="" class="btn btn-success">Cấu hình Banner</a>
  hoặc
  <button class="btn btn-success">Cấu hình Banner</button>

• Đối với các nút hành động, sử dụng class btn btn-primary. Ví dụ như: Tìm kiếm, Xuất excel, Báo cáo,…
  <a href="" class="btn btn-primary">Xuất excel</a>
  hoặc
  <button class="btn btn-primary">Tìm kiếm</button>

• Đối với các nút không quan trọng, sử dụng class btn btn-default. Ví dụ như: Xóa form, Hủy,…
  <button class="btn btn-success">Xóa form</button>

• Đối với các nút quan trọng có thể không thể phục hồi, sử dụng class btn btn-danger. Ví dụ như: Xóa,
  <button class="btn btn-danger">Xóa</button>

• Đối với các nút chỉ có icon, cần bổ sung thuộc tính title để mô tả rõ hơn chức năng của nút. Ví dụ
  <button class="btn btn-success" title="Sửa"><i class="fa fa-pencil"></i></button>

Căn lề (align)

• Trong modal, các nút chức năng như Lưu lại, Đóng đặt vị trí bên phải.
• Trong mục filter, các nút chức năng như: Tìm kiếm, Xóa form đặt vị trí bên trái.
• Trong danh sách, các nút hành động như: Sửa, Xóa, Chi tiêt đặt vị trí chính giữa
• Trong danh sách, các trường thông tin đặt vị trí bên trái. Riêng trường thông tin liên quan đến tiền tệ đặt vị trí bên phải.

Hành động (action)

• Đối với các nút có sử dụng XHR Request, khi người dùng nhấn vào cần bổ sung thêm thuộc tính disabled hoặc loading. Chú ý chỉ thêm loading cho chính button đó.

Biểu mẫu (form)

• Hãy sử dụng chỉ một đường dẫn cho một chức năng CRUD, không nên tách thành nhiều đường dẫn như /add /edit /remove