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