Button
Properties
Button
| Name | Type | Default | Description |
|---|---|---|---|
| variant | ButtonVariants | primary | Độ đậm của background color |
| loading | boolean | Hiển thị icon loading | |
| disabled | boolean | Trạng thái disable | |
| type | ButtonType | highlight | Loại button |
| htmlType | ButtonHTMLType | button | HTML button type |
| size | ButtonSize | Kích thước button | |
| fullWidth | boolean | Đặt kích thước button full parent width | |
| prefixIcon | React.ReactNode | Thêm prefix icon | |
| suffixIcon | React.ReactNode | Thêm suffix icon | |
| icon | React.ReactNode | Thêm icon cho button |
Type
ButtonType
| Name | Description |
|---|---|
| "highlight" | highlight |
| "danger" | danger |
| "neutral" | neutral |
ButtonHTMLType
| Name | Description |
|---|---|
| "submit" | submit |
| "button" | button |
| "reset" | reset |
ButtonSize
| Name | Description |
|---|---|
| "large" | large |
| "medium" | medium |
| "small" | small |
ButtonVariants
| Name | Description |
|---|---|
| "primary" | primary button |
| "secondary" | secondary button |
| "tertiary" | tertiary button |
Example
import React from 'react'; import { Page, Button, Box, Text, Icon } from 'zmp-ui'; export default function HomePage(props) { return ( <> <div className='section-container'> <Text.Title size='small'>Variant: level</Text.Title> <Box mt={2}> <Text>Có 3 level button cơ bản: Primary, Secondary, Tertiary</Text> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Primary </Text> </Box> <Box mt={6}> <Button variant='primary' size='large'> Button </Button> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Secondary </Text> </Box> <Box mt={6}> <Button variant='secondary' size='large'> Button </Button> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Tertiary </Text> </Box> <Box mt={6}> <Button variant='tertiary' size='large'> Button </Button> </Box> </div> <div className='section-container'> <Text.Title size='small'> Type Primary / Secondary / Tertiary </Text.Title> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Highlight </Text> </Box> <Box flex flexWrap> <Box mr={2} mt={6}> <Button variant='primary' type='highlight' size='large'> Button </Button> </Box> <Box mr={2} mt={6}> <Button variant='secondary' type='highlight' size='large'> Button </Button> </Box> <Box mr={2} mt={6}> <Button variant='tertiary' type='highlight' size='large'> Button </Button> </Box> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Danger </Text> </Box> <Box flex flexWrap> <Box mr={2} mt={6}> <Button variant='primary' type='danger' size='large'> Button </Button> </Box> <Box mr={2} mt={6}> <Button variant='secondary' type='danger' size='large'> Button </Button> </Box> <Box mr={2} mt={6}> <Button variant='tertiary' type='danger' size='large'> Button </Button> </Box> </Box> <Box mt={6} flex flexWrap> <Text className='italic-sub-title' size='xSmall'> Neutral </Text> </Box> <Box flex flexWrap> <Box mr={2} mt={6}> <Button variant='primary' type='neutral' size='large'> Button </Button> </Box> <Box mr={2} mt={6}> <Button variant='secondary' type='neutral' size='large'> Button </Button> </Box> <Box mr={2} mt={6}> <Button variant='tertiary' type='neutral' size='large'> Button </Button> </Box> </Box> </div> <div className='section-container'> <Text.Title size='small'>Size</Text.Title> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Large </Text> </Box> <Box mt={6}> <Button size='large'>Button</Button> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Medium </Text> </Box> <Box mt={6}> <Button size='medium'>Button</Button> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Small </Text> </Box> <Box mt={6}> <Button size='small'>Button</Button> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Full-width </Text> </Box> <Box mt={6}> <Button fullWidth>Button</Button> </Box> </div> <div className='section-container'> <Text.Title size='small'>Anatomy</Text.Title> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Nút với biểu tượng ở đầu </Text> </Box> <Box mt={6}> <Button size='large' prefixIcon={<Icon icon='zi-plus' />}> Button </Button> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Nút với biểu tượng ở sau </Text> </Box> <Box mt={6}> <Button size='large' suffixIcon={<Icon icon='zi-arrow-right' />}> Button </Button> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Nút </Text> </Box> <Box mt={6}> <Button size='large'>Button</Button> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Nút biểu tượng </Text> </Box> <Box mt={6}> <Button size='large' icon={<Icon icon='zi-plus' />}> Button </Button> </Box> </div> <div className='section-container'> <Text.Title size='small'>State</Text.Title> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Default </Text> </Box> <Box mt={6}> <Button size='large'>Button</Button> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Pressed </Text> </Box> <Box mt={6}> <Button size='large'>Button</Button> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Loading </Text> </Box> <Box mt={6}> <Button size='large' loading> Button </Button> </Box> <Box mt={6}> <Text className='italic-sub-title' size='xSmall'> Disabled </Text> </Box> <Box mt={6}> <Button size='large' disabled> Button </Button> </Box> </div> </> ); }