In this tutorial, we will create buttons component using Chakra UI and React. We will see buttons component with icons, chakra ui button variant and size, also custom buttons example with react Chakra UI.
Install & Setup Vite + React + Typescript + Chakra UI
How to Use Chakra UI in Next.JS 13
React Chakra UI Buttons Example
1. react chakra ui simple buttons component.
import { Button, Stack } from "@chakra-ui/react";
export default function App() {
return (
<>
<Stack spacing={4} direction="row" align="center">
<Button>Button</Button>
<Button colorScheme="blue">Button</Button>
<Button colorScheme="green">Button</Button>
<Button colorScheme="red">Button</Button>
<Button colorScheme="yellow">Button</Button>
</Stack>
</>
);
}
react chakra ui buttons component
2. react chakra ui buttons component with variant Solid, outline, ghost, link.
import { Button, Stack } from "@chakra-ui/react";
export default function App() {
return (
<>
<Stack spacing={4} direction="row" align="center">
<Button colorScheme="teal" variant="solid">
Solid Button
</Button>
<Button colorScheme="teal" variant="outline">
Outline Button
</Button>
<Button colorScheme="teal" variant="ghost">
Ghost Button
</Button>
<Button colorScheme="teal" variant="link">
Link Button
</Button>
</Stack>
</>
);
}
chakra ui buttons component with variant
3. react chakra ui buttons component with size small, medium and large.
import { Button, Stack } from "@chakra-ui/react";
export default function App() {
return (
<>
<Stack spacing={4} direction="row" align="center">
<Button colorScheme="teal" size="xs">
Extra Small Button
</Button>
<Button colorScheme="teal" size="sm">
Small Button
</Button>
<Button colorScheme="teal" size="md">
Medium Button
</Button>
<Button colorScheme="teal" size="lg">
Large Button
</Button>
</Stack>
</>
);
}
chakra ui buttons sizes component
4. react chakra ui buttons component with colorScheme like, gray, red, orange, yellow, green, teal, blue, cyan, pink Also social media buttons like linkedin, facebook, messenger, whatsapp, twitter, telegram.
import { Flex, Button, Stack, Box, ButtonGroup, Wrap, WrapItem } from "@chakra-ui/react";
export default function App() {
return (
<>
<Flex height="100vh" alignItems="center" justifyContent="center">
<Stack direction="column">
<Box
display="flex"
alignItems="center"
justifyContent="center"
width="100%"
py={12}
bgImage="url('https://bit.ly/2Z4KKcF')"
bgPosition="center"
bgRepeat="no-repeat"
mb={2}
>
<ButtonGroup gap="4">
<Button colorScheme="whiteAlpha">WhiteAlpha</Button>
<Button colorScheme="blackAlpha">BlackAlpha</Button>
</ButtonGroup>
</Box>
<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>
<WrapItem>
<Button colorScheme="blue">Blue</Button>
</WrapItem>
<WrapItem>
<Button colorScheme="cyan">Cyan</Button>
</WrapItem>
<WrapItem>
<Button colorScheme="purple">Purple</Button>
</WrapItem>
<WrapItem>
<Button colorScheme="pink">Pink</Button>
</WrapItem>
<WrapItem>
<Button colorScheme="linkedin">Linkedin</Button>
</WrapItem>
<WrapItem>
<Button colorScheme="facebook">Facebook</Button>
</WrapItem>
<WrapItem>
<Button colorScheme="messenger">Messenger</Button>
</WrapItem>
<WrapItem>
<Button colorScheme="whatsapp">Whatsapp</Button>
</WrapItem>
<WrapItem>
<Button colorScheme="twitter">Twitter</Button>
</WrapItem>
<WrapItem>
<Button colorScheme="telegram">Telegram</Button>
</WrapItem>
</Wrap>
</Stack>
</Flex>
</>
);
}
chakra ui buttons component with colorScheme
To Use button component with icon you need to install @chakra-ui/icons icons.
Install the package in your project directory with:
# with npm
npm i @chakra-ui/icons
# with yarn
yarn add @chakra-ui/icons
5. react chakra ui buttons component with @chakra-ui/icons icons.
import { ArrowForwardIcon, EmailIcon } from "@chakra-ui/icons";
import { Button, Stack } from "@chakra-ui/react";
export default function App() {
return (
<>
<Stack direction="row" spacing={4}>
<Button leftIcon={<EmailIcon />} colorScheme="teal" variant="solid">
Email
</Button>
<Button
rightIcon={<ArrowForwardIcon />}
colorScheme="teal"
variant="outline"
>
Call us
</Button>
</Stack>
</>
);
}
chakra ui buttons with icons.
6. react chakra ui loading buttons state component.
import { Button, Stack } from "@chakra-ui/react";
export default function App() {
return (
<>
<Stack direction="row" spacing={4}>
<Button isLoading colorScheme="teal" variant="solid">
Email
</Button>
<Button
isLoading
loadingText="Submitting"
colorScheme="teal"
variant="outline"
>
Submit
</Button>
</Stack>
</>
);
}
chakra ui loading button state
You can also use react-icons icon library .
npm install react-icons --save
7. react chakra ui social media buttons with react-icons icon library.
import { Flex, Button, HStack } from "@chakra-ui/react";
import { FaFacebook, FaTwitter, FaWhatsapp } from "react-icons/fa";
export default function App() {
return (
<>
<Flex height="100vh" alignItems="center" justifyContent="center">
<HStack>
<Button colorScheme="facebook" leftIcon={<FaFacebook />}>
Facebook
</Button>
<Button colorScheme="whatsapp" leftIcon={<FaWhatsapp />}>
Twitter
</Button>
<Button colorScheme="twitter" leftIcon={<FaTwitter />}>
Twitter
</Button>
</HStack>
</Flex>
</>
);
}
chakra ui social media buttons with icon
8. react chakra ui group buttons.
import { AddIcon } from "@chakra-ui/icons";
import {
Button,
HStack,
ButtonGroup,
IconButton,
} from "@chakra-ui/react";
export default function App() {
return (
<>
<HStack>
<ButtonGroup variant="outline" spacing="6">
<Button colorScheme="blue">Save</Button>
<Button>Cancel</Button>
</ButtonGroup>
<ButtonGroup size="sm" isAttached variant="outline">
<Button>Save</Button>
<IconButton aria-label="Add to friends" icon={<AddIcon />} />
</ButtonGroup>
</HStack>
</>
);
}
chakra ui group buttons
9. react chakra ui Button style via props you can customize buttons.
import { Flex, Button, Stack } from "@chakra-ui/react";
export default function App() {
return (
<>
<Flex height="100vh" alignItems="center" justifyContent="center">
<Stack direction="row" spacing={4} align="center">
<Button
size="md"
height="48px"
width="200px"
border="2px"
borderColor="teal.500"
>
Button
</Button>
<Button
size="md"
height="48px"
width="200px"
border="2px"
colorScheme="gray.200"
color="gray.800"
borderColor="blue.500"
>
Button
</Button>
<Button
size="md"
height="48px"
width="200px"
border="2px"
colorScheme="red.200"
color="red.800"
borderColor="red.500"
>
Button
</Button>
</Stack>
</Flex>
</>
);
}
chakra ui custom button
