chakra ui之 Button Icon IconButton

button

import { Button, ButtonGroup } from "@chakra-ui/react"

//usage
<Button colorScheme="blue">Button</Button>
//size  xs, sm, md, lg.
//variant solid, ghost, outline, link.
//with Icon leftIcon={<EmailIcon />}  rightIcon={<ArrowForwardIcon />}

//react-icons
<Button leftIcon={<MdBuild />} colorScheme="pink" variant="solid">
    Settings
</Button>
//isLoading
//spinner spinner={<BeatLoader size={8} color="white" />}

//social button
<HStack>
  <Button colorScheme="facebook" leftIcon={<FaFacebook />}>
    Facebook
  </Button>
  <Button colorScheme="twitter" leftIcon={<FaTwitter />}>
    Twitter
  </Button>
</HStack>

//ButtonGroup 
//isAttached 

// The size prop affects the height of the button
// It can still be overriden by passing a custom height
<Button
  size="md"
  height="48px"
  width="200px"
  border="2px"
  borderColor="green.500"
>
  Button
</Button>

//costom button
// Button from facebook.com
<Box
  as="button"
  height="24px"
  lineHeight="1.2"
  transition="all 0.2s cubic-bezier(.08,.52,.52,1)"
  border="1px"
  px="8px"
  borderRadius="2px"
  fontSize="14px"
  fontWeight="semibold"
  bg="#f5f6f7"
  borderColor="#ccd0d5"
  color="#4b4f56"
  _hover={{ bg: "#ebedf0" }}
  _active={{
    bg: "#dddfe2",
    transform: "scale(0.98)",
    borderColor: "#bec3c9",
  }}
  _focus={{
    boxShadow:
      "0 0 1px 2px rgba(88, 144, 255, .75), 0 1px 1px rgba(0, 0, 0, .15)",
  }}
>
  Join Group
</Box>

Icon

Avoid passing onClick handlers to icon components. If you need a clickable icon, use the IconButton instead.

• Using Chakra UI icon library

//install
npm i @chakra-ui/icons
# or
yarn add @chakra-ui/icons

import { PhoneIcon, AddIcon, WarningIcon } from '@chakra-ui/icons'

// The default icon size is 1em (16px)
<PhoneIcon />

// Use the `boxSize` prop to change the icon size
<AddIcon w={6} h={6} />

// Use the `color` prop to change the icon color
<WarningIcon w={8} h={8} color="red.500" />

• Using a third-party icon library

import { Icon } from "@chakra-ui/react"
import { MdSettings } from "react-icons/md"

// Use the `as` prop
function Example() {
  return <Icon as={MdSettings} />
}

• Creating your own icons
  1.Using the Icon component
  2.Using the createIcon function

import { Icon, createIcon } from "@chakra-ui/react"

Tips for generating your own icons
1.Export icons as svg from Figma, Sketch, etc.
2.Use a tool like SvgOmg to reduce the size and minify the markup.

Fallback Icon
When children is not provided, the Icon component renders a fallback icon.

Icon Button

import { IconButton } from "@chakra-ui/react"
//aria-label needed
<IconButton aria-label="Search database" icon={<SearchIcon />} />
//with react-icon
<IconButton
  variant="outline"
  colorScheme="teal"
  aria-label="Call Sage"
  fontSize="20px"
  icon={<MdPhone />}
/>