--- sourceType: official-guide sourceTypeMatchedRule: fallback slug: MA/zaui/form/Button title: Button --- ```ts import { Button } from "zmp-ui"; ``` Dùng để tạo các nút bấm giúp người dùng tương tác thực hiện một hành động nào đó. ### Hướng dẫn sử dụng ## Ví dụ ## Bảng thuộc tính | Tên | Type | Required | Default | Mô tả | | --- | --- | --- | --- | --- | | variant | 'primary' \| 'secondary' \| 'tertiary' | No | 'primary' | Kiểu biến thể của nút. Có thể nhận một trong các giá trị sau: - `primary`: Nút chính, có màu đậm và làm nổi bật các thao tác quan trọng - `secondary`: Nút phụ, màu nhạt hơn để tập trung sự chú ý của người dùng vào các thao tác khác quan trọng hơn - `tertiary`: Nút thứ ba, có màu trắng và thường được sử dụng cho các thao tác ít quan trọng hơn cả nút phụ | | loading | boolean | No | false | Hiển thị icon loading | | disabled | boolean | No | false | Trạng thái disable | | children | React.ReactNode | No | | | | type | 'highlight' \| 'danger' \| 'neutral' | No | 'highlight' | Loại thao tác của nút. Có thể nhận một trong các giá trị sau: - highlight: Mang màu chủ đạo, làm nổi bật nút so với các thành phần khác trên ứng dụng - danger: Có màu đỏ, nhấn mạnh thao tác của nút có thể dẫn đến những hệ quả quan trọng hoặc nguy hiểm - neutral: Có màu trắng, trung hoà với các thành phần khác trên ứng dụng | | htmlType | 'submit' \| 'button' \| 'reset' | No | 'button' | Thuộc tính `type` mặc định của thẻ `` | | size | 'large' \| 'medium' \| 'small' | No | 'medium' | Độ lớn của nút. | | fullWidth | boolean | No | false | Nếu bật, nút sẽ có chiều rộng 100% của phần tử chứa nó. | | prefixIcon | React.ReactNode | No | | Thêm prefix icon | | suffixIcon | React.ReactNode | No | | Thêm suffix icon | | icon | React.ReactNode | No | | Thêm icon cho button | ### Tiêu chuẩn thiết kế {/* inline-mdx: ../specs/Button.mdx (from .sources/zmp-docs/zaui-react_versioned_docs/version-1.11.0/form/Button.mdx) */} #### Button Button thể hiện hành động mà user có thể thực hiện trên UI. --- ##### Anatomy ![anatomy](/assets/MA/img/zaui/button/anatomy.png) | Element | Description | | ---------------- | ----------- | | 1. Leading Icon | Optional | | 2. Text | Optional | | 3. Trailing Icon | Optional | | 4. Container | Optional | --- ##### Types ###### **Label Button** Button thể hiện hành động mà user có thể thực hiện trên UI. ![Label Button](/assets/MA/img/zaui/button/label-button.png) ###### **Icon Button** Loại button chỉ chứa icon. ![Icon Button](/assets/MA/img/zaui/button/icon-button.png) --- ##### Properties ###### **Levels** Button gồm 3 levels: Primary, Secondary, Tertiary ![Button Levels](/assets/MA/img/zaui/button/icon-button.png) **Primary Button** ![Button Primary](/assets/MA/img/zaui/button/primary-button.png) **Secondary Button** ![Button Secondary](/assets/MA/img/zaui/button/secondary-button.png) **Tertiary Button** ![Button Tertiary](/assets/MA/img/zaui/button/tertiary-button.png) ###### **Sizes** Button gồm 3 sizes: Large, Medium, Small ![Button Size](/assets/MA/img/zaui/button/button-size.png) ###### **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](/assets/MA/img/zaui/button/primary-state.png) **Secondary Button** ![Button State](/assets/MA/img/zaui/button/secondary-state.png) **Tertiary Button** ![Button State](/assets/MA/img/zaui/button/tertiary-state.png) --- ###### **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 :::warning Lưu ý Sử dụng thêm divider khi Button dock to bottom of the screen ::: ![Button Large](/assets/MA/img/zaui/button/large-size.png) --- **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](/assets/MA/img/zaui/button/small-size.png) --- ###### **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](/assets/MA/img/zaui/button/floating-button.png) --- ###### **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](/assets/MA/img/zaui/button/group-button.png) --- ###### **Specs** **General Specs** ![General Specs](/assets/MA/img/zaui/button/general-specs.png) **Overall Specs** ![Overal Specs](/assets/MA/img/zaui/button/overal-specs.png) **Button Group** ![Overal Specs](/assets/MA/img/zaui/button/button-group-specs.png) {/* inline-mdx: end ../specs/Button.mdx */}