Nhảy tới nội dung
Phiên bản: 1.8.0

Button

Button thể hiện hành động mà user có thể thực hiện trên UI.


Anatomy

anatomy
ElementDescription
1. Leading IconOptional
2. TextOptional
3. Trailing IconOptional
4. ContainerOptional

Types

Label Button

Button thể hiện hành động mà user có thể thực hiện trên UI.

Label Button

Icon Button

Loại button chỉ chứa icon.

Icon Button

Properties

Levels

Button gồm 3 levels: Primary, Secondary, Tertiary

 Button Levels

Primary Button

Button Primary

Secondary Button

Button Secondary

Tertiary Button

Button Tertiary

Sizes

Button gồm 3 sizes: Large, Medium, Small

Button Size

States

Button gồm 3 states:

  1. Pressed: Thể hiện trạng thái khi user nhấn giữ button
  2. Loading: Thể hiện trạng thái đang thực hiện hành động
  3. Disabled: Thể hiện trạng thái button không khả dụng tại thời điểm user đang sử dụng

Primary Button

Button State

Secondary Button

Button State

Tertiary Button

Button State

Usage

General Usage

LABEL BUTTON

Button chứa text và có thể đi kèm icon, thường được sử dụng cho:

  • Action mang tính chất confirmation
  • Action có mức độ quan trọng cao

ICON BUTTON

Button chỉ chứa icon, thường được sử dụng cho:

  • Action mang tính chất bổ trợ
  • Action kém quan trọng hơn

Sizes

LARGE

Sử dụng Large size cho trường hợp Button nằm trên một page

Lưu ý

Sử dụng thêm divider khi Button dock to bottom of the screen

Button Large

SMALL

Sử dụng Small size cho trường hợp Button nằm trong một section nhỏ hoặc một UI element có kích thước nhỏ

Button Small

Floating Action Button

Button được sử dụng nằm floating trên UI, thường được dock to top or bottom of the screen.

Button FAB

Button Group

Button Group là một nhóm các Button đi chung với nhau

  • Chỉ có một Primary Button trong một Button Group
  • Đảm bảo độ tương phản về mức độ quan trọng giữa các Button

DIRECTION

Button Group gồm 2 hướng:

  • Horizontal: Primary Button luôn nằm bên phải
  • Vertical: Primary Button luôn nằm trên cùng
Button Group

Specs

General Specs

General Specs

Overall Specs

Overal Specs

Button Group

Overal Specs