Chakra UI Form Button

Chakra UI Form Button is the component provided by the Chakra UI, which is an important component for user interaction and form submission. Buttons are the most integral elements of the application. These buttons are in various variants like size, color, icon, loading state, and many more. We can use buttons is real-time applications for dialog openings, form submissions, etc. In this article, we will see the practical implementation of all the Chakra UI Form Button variants with practical example.

Prerequisites:

• NPM & Node JS
• React
• ReactJS Chakra UI

Approach:

We have created Chakra UI Form Button of various variants like Size-based button, Color-based button, Icons in button, Loading State button, Social button, Grouping button, and also Custom button. All these button can be further customized by adjusting the prop values and making the button more attractive by adding the custom-based styling classes to them.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app chakra

Step 2: After creating your project folder(i.e. chakra), move to it by using the following command:

cd chakra

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

The updated dependencies are in the package.json file:

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
 }

Example: Below is the practical implementation of the Chakra UI Form Button:

Javascript

// App.js
import {
    ChakraProvider, Box, Button,
    ButtonGroup, Wrap, WrapItem,
    Stack, HStack, Heading
}
    from '@chakra-ui/react';
function App() {
    return (
        <ChakraProvider>
            <Box color="teal" p={4} >
                <Heading as="h1"
                    color="green.500">GeeksforGeeks
                </Heading>
                <Heading as="h3"
                    mt={2}>Chakra UI Form Buttons
                </Heading>
            </Box>
            <Box p={4}>
                <h2>Button Sizes</h2>
                <Stack spacing={4}
                    direction='row' align='center'>
                    <Button colorScheme='teal'
                        size='xs'>Extra Small</Button>
                    <Button colorScheme='teal'
                        size='sm'>Small</Button>
                    <Button colorScheme='teal'
                        size='md'>Medium</Button>
                    <Button colorScheme='teal'
                        size='lg'>Large</Button>
                </Stack>
            </Box>
            <Box p={4}>
                <h2>Button Variants</h2>
                <Stack direction='row' spacing={4}
                    align='center'>
                    <Button colorScheme='teal'
                        variant='solid'>Solid</Button>
                    <Button colorScheme='teal'
                        variant='outline'>Outline</Button>
                    <Button colorScheme='teal'
                        variant='ghost'>Ghost</Button>
                    <Button colorScheme='teal'
                        variant='link'>Link</Button>
                </Stack>
            </Box>
            <Box p={4}>
                <h2>Button Colors</h2>
                <Wrap spacing={4}>
                    <WrapItem><Button
                        colorScheme='gray'>Gray</Button>
                    </WrapItem>
                    <WrapItem><Button
                        colorScheme='red'>Red</Button>
                    </WrapItem>
                    <WrapItem><Button
                        colorScheme='orange'>Orange</Button>
                    </WrapItem>
                    <WrapItem><Button
                        colorScheme='yellow'>Yellow</Button>
                    </WrapItem>
                    <WrapItem><Button
                        colorScheme='green'>Green</Button>
                    </WrapItem>
                    <WrapItem><Button
                        colorScheme='teal'>Teal</Button>
                    </WrapItem>
                </Wrap>
            </Box>
            <Box p={4}>
                <h2>Button with Icon</h2>
                <Stack direction='row' spacing={4}>
                    <Button leftIcon={<Box w={4} h={4}
                        bg="white" borderRadius="full" />}
                        colorScheme='teal' variant='solid'>
                        Icon Left
                    </Button>
                    <Button rightIcon={<Box w={4} h={4}
                        bg="white" borderRadius="full" />}
                        colorScheme='teal' variant='outline'>
                        Icon Right
                    </Button>
                </Stack>
            </Box>
            <Box p={4}>
                <h2>Button Loading State</h2>
                <Stack direction='row' spacing={4}>
                    <Button isLoading colorScheme='teal'
                        variant='solid'>
                        Loading...
                    </Button>
                    <Button isLoading loadingText='Submitting'
                        colorScheme='teal' variant='outline'>
                        Submitting...
                    </Button>
                </Stack>
            </Box>
            <Box p={4}>
                <h2>Social Buttons</h2>
                <HStack spacing={4}>
                    <Button colorScheme='facebook'>
                        Facebook
                    </Button>
                    <Button colorScheme='twitter'>
                        Twitter
                    </Button>
                </HStack>
            </Box>
            <Box p={4}>
                <h2>Grouping Buttons</h2>
                <ButtonGroup variant='outline' spacing='6'>
                    <Button colorScheme='blue'>
                        Save
                    </Button>
                    <Button>Cancel</Button>
                </ButtonGroup>
            </Box>
            <Box p={4}>
                <h2>Custom Button</h2>
                <Box
                    as='button'
                    height='40px'
                    lineHeight='1.2'
                    transition='all 0.2s cubic-bezier(.08,.52,.52,1)'
                    border='1px'
                    px='16px'
                    borderRadius='4px'
                    fontSize='16px'
                    fontWeight='semibold'
                    bg='#2d3748'
                    borderColor='#4a5568'
                    color='white'
                    _hover={{ bg: '#4a5568' }}
                    _active={{
                        bg: '#2d3748',
                        transform: 'scale(0.98)',
                        borderColor: '#2d3748',
                    }}
                    _focus={{
                        boxShadow: `0 0 1px 2px rgba(88, 144, 255, .75),
            0 1px 1px rgba(0, 0, 0, .15)`,
                    }}
                >
                    Custom Button
                </Box>
            </Box>
        </ChakraProvider>
    );
}
export default App;

Step to run the Application:

npm start

Output: Now go to http://localhost:3000 in your browser: