React-Bootstrap Pill badges

React-Bootstrap Pill badges are used for indication purposes like showing the notification number, and we can also display messages using variants that come with this framework. Pill badges can be made by using the Badge component of the React-Bootstrap this is used to give the badges a rounded corner shape. In this article, we will see how to use the Pill Property of the Badge Component in React-Bootstrap.

React-Bootstrap props used:

• pill: This class makes the border rounded

Syntax:

<Badge pill>Content</Badge>

Example 1: This example defines a vertical stack of Bootstrap badges using React. The badges have different background colors and text colors, are styled as pill-shaped labels, and are organized within a stack component.

Javascript

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import Badge from "react-bootstrap/Badge";
import Stack from "react-bootstrap/Stack";
const App = () => {
    return (
        <Stack direction="vertical"
            gap={2} style={{
                width: "120px",
                margin: "19px"
            }}>
            Badge Pill Example
            <Badge pill bg="primary">
                Primary Pill
            </Badge>
            <Badge pill bg="secondary">
                Secondary Pill
            </Badge>
            <Badge pill bg="success">
                Success Pill
            </Badge>
            <Badge pill bg="danger">
                Danger Pill
            </Badge>
            <Badge pill bg="warning" text="dark">
                Warning Pill
            </Badge>
            <Badge pill bg="info">
                Info Pill
            </Badge>
            <Badge pill bg="light" text="dark">
                Light Pill
            </Badge>
            <Badge pill bg="dark">
                Dark Pill
            </Badge>
        </Stack>
    );
};

export default App;

Output: Type npm start in the terminal and then open your browser and go to http://localhost:3000/, you will see the following output.

Pill output 1

Example 2: This example creates a horizontal stack of Bootstrap buttons, each accompanied by a badge indicating the count of unread messages.

Javascript

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import Badge from "react-bootstrap/Badge";
import Stack from "react-bootstrap/Stack";
import { Button } from "react-bootstrap";
const Home = () => {
    return (
        <div className="d-flex justify-content-center">
            <Stack
                direction="horizontal"
                gap={2}
                style={{
                    padding: "20px",
                    width: "80px"
                }}>
                <Button>
                    Mails
                    <Badge pill bg="danger"
                        style={{
                            position: "absolute",
                            top: "10px"
                        }}>
                        9
                    </Badge>
                    <span className="visually-hidden">
                        unread messages
                    </span>
                </Button>
                <Button>
                    Unread
                    <Badge pill bg="secondary"
                        style={{
                            position: "absolute",
                            top: "10px"
                        }}>
                        9
                    </Badge>
                    <span className="visually-hidden">
                        unread messages
                    </span>
                </Button>
                <Button>
                    Spam
                    <Badge pill bg="warning"
                        style={{
                            position: "absolute",
                            top: "10px"
                        }}>
                        9
                    </Badge>
                    <span className="visually-hidden">
                        unread messages
                    </span>
                </Button>
                <Button>
                    Trash
                    <Badge pill bg="dark"
                        style={{
                            position: "absolute",
                            top: "10px"
                        }}>
                        9
                    </Badge>
                    <span className="visually-hidden">
                        unread messages
                    </span>
                </Button>
            </Stack>
        </div>
    );
};

export default Home;

Output: Go to http://localhost:3000/, you will see the following output.

Output