Button
- Guidelines
- Implementation
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
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
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
Button tạo giao diện 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 đó
Properties
Button
Example
import React from "react";
import { Page, Button, Box, Text, Icon } from "zmp-ui";
export default function HomePage(props) {
return (
<>
Variant: level</Text.Title>
<Box mt={2}>
<Text>Có 3 level button cơ bản: Primary, Secondary, Tertiary
</Box>
<Text className="italic-sub-title" size="xSmall">
Primary
</Text>
<Button variant="primary" size="large">
Button
</Button>
<Text className="italic-sub-title" size="xSmall">
Secondary
</Text>
<Button variant="secondary" size="large">
Button
</Button>
<Text className="italic-sub-title" size="xSmall">
Tertiary
</Text>
<Button variant="tertiary" size="large">
Button
</Button>
Type Primary / Secondary / Tertiary
</Text.Title>
<Box mt={6}>
<Text className="italic-sub-title" size="xSmall">
Highlight
</Box>
<Box mr={2} mt={6}>
<Button variant="primary" type="highlight" size="large">
Button
</Button>
<Button variant="secondary" type="highlight" size="large">
Button
</Button>
<Button variant="tertiary" type="highlight" size="large">
Button
</Button>
</Box>
<Text className="italic-sub-title" size="xSmall">
Danger
</Text>
<Box mr={2} mt={6}>
<Button variant="primary" type="danger" size="large">
Button
</Button>
<Button variant="secondary" type="danger" size="large">
Button
</Button>
<Button variant="tertiary" type="danger" size="large">
Button
</Button>
</Box>
<Text className="italic-sub-title" size="xSmall">
Neutral
</Text>
<Box mr={2} mt={6}>
<Button variant="primary" type="neutral" size="large">
Button
</Button>
<Button variant="secondary" type="neutral" size="large">
Button
</Button>
<Button variant="tertiary" type="neutral" size="large">
Button
</Button>
</Box>
Size</Text.Title>
<Box mt={6}>
<Text className="italic-sub-title" size="xSmall">
Large
</Box>
<Button size="large">Button</Button>
<Text className="italic-sub-title" size="xSmall">
Medium
</Text>
<Button size="medium">Button</Button>
<Text className="italic-sub-title" size="xSmall">
Small
</Text>
<Button size="small">Button</Button>
<Text className="italic-sub-title" size="xSmall">
Full-width
</Text>
<Button fullWidth>Button</Button>
Anatomy</Text.Title>
<Box mt={6}>
<Text className="italic-sub-title" size="xSmall">
Nút với biểu tượng ở đầu
</Box>
}>
Button
</Button>
<Text className="italic-sub-title" size="xSmall">
Nút với biểu tượng ở sau
</Text>
}>
Button
</Button>
<Text className="italic-sub-title" size="xSmall">
Nút
</Text>
<Button size="large">Button</Button>
<Text className="italic-sub-title" size="xSmall">
Nút biểu tượng
</Text>
}>
Button
</Button>
State</Text.Title>
<Box mt={6}>
<Text className="italic-sub-title" size="xSmall">
Default
</Box>
<Button size="large">Button</Button>
<Text className="italic-sub-title" size="xSmall">
Pressed
</Text>
<Button size="large">Button</Button>
<Text className="italic-sub-title" size="xSmall">
Loading
</Text>
<Button size="large" loading>
Button
</Button>
<Text className="italic-sub-title" size="xSmall">
Disabled
</Text>
<Button size="large" disabled>
Button
</Button>
</>
);
}