按钮

按钮被用作动作的触发器. 它们被用于形式、工具栏、, 对话框页脚和作为独立动作触发器 .

安装

yarn add @chakra-ui/button

# or

npm i @chakra-ui/button

导入组件

import { Button } from "@chakra-ui/button"

使用量

<Button colorScheme="green">Button</Button>

按钮大小

使用 size 改变按钮大小的道具。 您可以设定值为 xs, (中文(简体) ), sm, (中文(简体) ), md,或 lg。 。 。 .

<Stack>
  <Button size="xs">Button</Button>
  <Button size="sm">Button</Button>
  <Button size="md">Button</Button>
  <Button size="lg">Button</Button>
</Stack>

按钮变量

使用 variant 道克来改变按钮的视觉风格. 你可以设置 值为 solid, (中文(简体) ), ghost, (中文(简体) ), outline,或 link。 。 。 .

<ButtonGroup>
  <Button variant="solid">Button</Button>
  <Button variant="outline">Button</Button>
  <Button variant="ghost">Button</Button>
  <Button variant="link">Button</Button>
</ButtonGroup>

带有图标的按钮

您可以将左右图标添加到按钮组件中.

<ButtonGroup>
  <Button leftIcon={<EmailIcon />} variant="solid">
    Email
  </Button>
  <Button rightIcon={<ArrowForwardIcon />} variant="outline">
    Call us
  </Button>
</ButtonGroup>

按钮装入状态

过 isLoading 向按钮组件道具以显示其装入状态 。 你们可以 可选通过 loadingText 道具 (英语).

也可以使用自定义自旋器来制作自旋器组件.

<Stack>
  <Button isLoading colorScheme="teal" variant="solid">
    Email
  </Button>

  <Button
    isLoading
    colorScheme="teal"
    variant="outline"
    spinner={<BarSpinner />}
  >
    Submit
  </Button>
</Stack>