Button
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
- Tiêu chuẩn thiết kế
Ví dụ
Bảng thuộc tính
| Property | Type | Required | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'tertiary' | No | 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ụ (default: 'primary') |
| loading | boolean | No | Hiển thị icon loading (default: false) |
| disabled | boolean | No | Trạng thái disable (default: false) |
| children | React.ReactNode | No | |
| type | 'highlight' | 'danger' | 'neutral' | No | 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 (default: 'highlight') |
| htmlType | 'submit' | 'button' | 'reset' | No | Thuộc tính `type` mặc định của thẻ `` (default: 'button') |
| size | 'large' | 'medium' | 'small' | No | Độ lớn của nút. (default: 'medium') |
| fullWidth | boolean | No | Nếu bật, nút sẽ có chiều rộng 100% của phần tử chứa nó. (default: false) |
| 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 |
Button
Button thể hiện hành động mà user có thể thực hiện trên UI.
Anatomy
| 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.
Icon Button
Loại button chỉ chứa icon.
Properties
Levels
Button gồm 3 levels: Primary, Secondary, Tertiary
Primary Button
Secondary Button
Tertiary Button
Sizes
Button gồm 3 sizes: Large, Medium, Small
States
Button gồm 3 states:
- Pressed: Thể hiện trạng thái khi user nhấn giữ button
- Loading: Thể hiện trạng thái đang thực hiện hành động
- 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
Secondary Button
Tertiary Button
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
Sử dụng thêm divider khi Button dock to bottom of the screen
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ỏ
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 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
Specs
General Specs
Overall Specs
Button Group
