Button 按钮组件 #

import { Button } from '@chakra-ui/react'

function Example() {
  return <Button>默认按钮</Button>
}

<Button colorScheme="blue">主要按钮</Button>
<Button colorScheme="green">成功按钮</Button>
<Button colorScheme="red">危险按钮</Button>
<Button colorScheme="orange">警告按钮</Button>

<Button variant="outline" colorScheme="blue">轮廓按钮</Button>
<Button variant="outline" colorScheme="green">轮廓按钮</Button>

<Button variant="ghost" colorScheme="blue">幽灵按钮</Button>
<Button variant="ghost" colorScheme="green">幽灵按钮</Button>

<Button variant="link" colorScheme="blue">链接按钮</Button>

<Button size="xs">超小按钮</Button>
<Button size="sm">小按钮</Button>
<Button size="md">中等按钮（默认）</Button>
<Button size="lg">大按钮</Button>

<Button isDisabled>禁用按钮</Button>
<Button isDisabled variant="outline">禁用轮廓按钮</Button>

<Button isLoading colorScheme="blue">
  加载中
</Button>

<Button isLoading loadingText="提交中..." colorScheme="blue">
  提交
</Button>

<Button
  isLoading
  loadingText="处理中..."
  spinnerPlacement="start"
  colorScheme="blue"
>
  处理
</Button>

<Button
  isLoading
  loadingText="处理中..."
  spinnerPlacement="end"
  colorScheme="blue"
>
  处理
</Button>

import { EmailIcon } from '@chakra-ui/icons'

<Button leftIcon={<EmailIcon />} colorScheme="blue">
  发送邮件
</Button>

import { ArrowForwardIcon } from '@chakra-ui/icons'

<Button rightIcon={<ArrowForwardIcon />} colorScheme="blue">
  继续
</Button>

import { FiDownload, FiPlus, FiTrash } from 'react-icons/fi'

<Button leftIcon={<FiDownload />} colorScheme="blue">
  下载
</Button>

<Button leftIcon={<FiPlus />} colorScheme="green">
  添加
</Button>

<Button leftIcon={<FiTrash />} colorScheme="red">
  删除
</Button>

import { IconButton } from '@chakra-ui/react'
import { SearchIcon, SettingsIcon, BellIcon } from '@chakra-ui/icons'

<IconButton aria-label="搜索" icon={<SearchIcon />} />
<IconButton aria-label="设置" icon={<SettingsIcon />} />
<IconButton aria-label="通知" icon={<BellIcon />} colorScheme="blue" />

<IconButton aria-label="搜索" icon={<SearchIcon />} variant="outline" />
<IconButton aria-label="搜索" icon={<SearchIcon />} variant="ghost" />
<IconButton aria-label="搜索" icon={<SearchIcon />} variant="link" />

import { ButtonGroup } from '@chakra-ui/react'

<ButtonGroup>
  <Button colorScheme="blue">保存</Button>
  <Button>取消</Button>
</ButtonGroup>

<ButtonGroup variant="outline">
  <Button colorScheme="blue">左</Button>
  <Button colorScheme="blue">中</Button>
  <Button colorScheme="blue">右</Button>
</ButtonGroup>

<ButtonGroup size="sm" isAttached>
  <Button colorScheme="blue">保存</Button>
  <Button colorScheme="blue">另存为</Button>
</ButtonGroup>

<Button borderRadius="full" colorScheme="blue">
  圆角按钮
</Button>

<IconButton
  aria-label="添加"
  icon={<AddIcon />}
  borderRadius="full"
  colorScheme="blue"
/>

<Button w="full" colorScheme="blue">
  全宽按钮
</Button>

<Button
  bg="tomato"
  color="white"
  _hover={{ bg: 'tomato', opacity: 0.8 }}
>
  自定义颜色
</Button>

<Button
  bgGradient="linear(to-r, teal.500, green.500)"
  color="white"
  _hover={{
    bgGradient: 'linear(to-r, teal.600, green.600)',
  }}
>
  渐变按钮
</Button>

function FormButtons() {
  return (
    <ButtonGroup spacing={4}>
      <Button colorScheme="blue" type="submit">
        提交
      </Button>
      <Button variant="outline" onClick={onCancel}>
        取消
      </Button>
    </ButtonGroup>
  )
}

function SocialButtons() {
  return (
    <VStack spacing={3} w="full">
      <Button w="full" leftIcon={<FcGoogle />} variant="outline">
        使用 Google 登录
      </Button>
      <Button w="full" leftIcon={<FaGithub />} variant="outline">
        使用 GitHub 登录
      </Button>
      <Button w="full" leftIcon={<FaFacebook />} colorScheme="facebook">
        使用 Facebook 登录
      </Button>
    </VStack>
  )
}

function DangerButton({ onConfirm }) {
  return (
    <Button
      colorScheme="red"
      leftIcon={<DeleteIcon />}
      onClick={onConfirm}
    >
      删除
    </Button>
  )
}