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;