React Chakra UI Data Display Badge

Chakra UI Data Display Badge is the component that we use in ourReact application to mainly highlight the site’s status for quick identification. The best usage of the Badge is to display the Realtime status of the user’s activeness. We can embed the Badge component to dynamically show the user activeness by specifying Green color for Online status and Red Color for Offline status. In this article, we will see the practical implementation of the Chakra UI Data Display Badge in terms of practical examples.

Prerequisites:

Approach:

We have created various forms of Chakra UI Data Display Badge. There are badges with various Colors, Variants, and compositions that include images, and also the Badge with customized font sizes. There is a toggling button, where the user can toggle the badges between colors and variants, this enhances the user interaction and also enhances the application’s functionality.

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 Filter.

Javascript

import { useState } from "react";
import {

    Badge,

    Box,

    Flex,

    Text,

    Avatar,

    Stack,

    ChakraProvider,

    CSSReset,

    extendTheme,

    Button,

} from "@chakra-ui/react";
const theme = extendTheme({

    colors: {

        brand: {

            50: "#f5fafd",

            100: "#d7ebf7",

            200: "#afd5eb",

            300: "#7db9d6",

            400: "#4e94c0",

            500: "#2d6a9f",

            600: "#1a4c7d",

            700: "#0d345e",

            800: "#031f3f",

            900: "#001226",

        },

    },
});

function App() {

    const [bType, setbType] = useState("color");

    const bTypeFn = () => {

        setbType((prevType) => (prevType === "color" ? "variant" : "color"));

    };

    return (

        <ChakraProvider theme={theme}>

            <CSSReset />

            <Box p={8}>

                <Text

                    as="h1"

                    color="green.500"

                    fontSize="2xl"

                    fontWeight="bold"

                    mb={4}

                >

                    GeeksforGeeks

                </Text>

                <Text as="h3" fontSize="lg" fontWeight="semibold" mb={4}>

                    Chakra UI Data Display Badge

                </Text>

                <Button onClick={bTypeFn} mb={4} color="green.500">

                    Toggle Badge Type

                </Button>

                <Text mb={2} color="gray.500">

                    Current Badge Type:{" "}

                    {bType === "color" ? "Color" : "Variant"}

                </Text>

                {bType === "color" && (

                    <Stack direction="row" mb={8} align="center">

                        <Badge colorScheme="blue">Technology</Badge>

                        <Badge colorScheme="green">Coding</Badge>

                        <Badge colorScheme="red">Interview</Badge>

                        <Badge colorScheme="purple">Articles</Badge>

                    </Stack>

                )}

                {bType === "variant" && (

                    <Stack direction="row" mb={8} align="center">

                        <Badge variant="outline" colorScheme="orange">

                            Beginner

                        </Badge>

                        <Badge variant="solid" colorScheme="orange">

                            Intermediate

                        </Badge>

                        <Badge variant="subtle" colorScheme="orange">

                            Advanced

                        </Badge>

                    </Stack>

                )}

                <Flex align="center">

                    <Avatar src=

"https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png" />

                    <Box ml="3">

                        <Text fontWeight="bold">

                            GeeksforGeeks

                            <Badge ml="1" colorScheme="blue">

                                Pro

                            </Badge>

                        </Text>

                        <Text fontSize="sm">Educational Platform</Text>

                    </Box>

                </Flex>

                <Text fontSize="xl" fontWeight="bold" mt={4}>

                    GeeksforGeeks

                    <Badge ml="1" fontSize="0.8em" colorScheme="green">

                        Verified

                    </Badge>

                </Text>

            </Box>

        </ChakraProvider>

    );
}

export default App;