implementation

Cập nhật lần cuối: 27/05/2022

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

Name	Type	Default	Description
disabled	boolean	false	Trạng thái disable
fullWidth	boolean	false	Nếu bật, nút sẽ có chiều rộng 100% của phần tử chứa nó.
htmlType	'submit' | 'button' | 'reset'	'button'	Thuộc tính type mặc định của thẻ <button>
icon	React.ReactNode		Thêm icon cho button
loading	boolean	false	Hiển thị icon loading
prefixIcon	React.ReactNode		Thêm prefix icon
size	'large' | 'medium' | 'small'	'medium'	Độ lớn của nút.
suffixIcon	React.ReactNode		Thêm suffix icon
type	'highlight' | 'danger' | 'neutral'	'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
variant	'primary' | 'secondary' | 'tertiary'	'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ụ

Example

Open Sandbox

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>
    </>
  );
}