React-Bootstrap Badge Contextual variations

React-Bootstrap is a front-end framework that was designed keeping react in mind. Bootstrap was re-built and revamped for React, hence it is known as React-Bootstrap.Badges are used for indication purposes like to show the notifications number, and we can also display messages using variants that come with this framework.We can style the badges differently depending on their context or state. Contextual variation basically allows us to change the visual presentation of React-Bootstrap components to convey different meanings, states or styles, depending on the specific use case or user interaction.
The different types of contextual variations available are:

• Primary: This class is used for displays Blue background Color.
• Secondary: This class is used for displays Gray background Color.
• Success: This class is used for displays Green background Color.
• Danger:This class is used for displays Red background Color.
• Warning: This class is used for displays Yellow background Color.
• Info: This class is used for displays Sky Blue background Color.
• Light:This class is used for displays White background Color.
• Dark: This class is used for displays Black background Color.

Syntax:

 <Badge bg="*"> Your Text </Badge>

Note: Replace “*” with above mentioned variants

Example 1: This example explains Primary, Secondary, Success, Danger variants of Badge Contextual Variants.

Javascript

// App.js
import React from "react";
import Badge from "react-bootstrap/Badge";

export default function App() {
    return (
        <div>
            <Badge bg="primary"> Blue </Badge>
            <Badge bg="secondary"> Gray </Badge>
            <Badge bg="success"> Green </Badge>
            <Badge bg="danger"> Red </Badge>
        </div>
)}

Output:

Example 2: This example explains Warning, Info, Light, Dark variants of Badge Contextual Variants.

Javascript

// App.js
import React from "react";
import Badge from "react-bootstrap/Badge";

export default function App() {
    return (
        <div>
            <Badge bg="warning" text="dark">Yellow</Badge>
            <Badge bg="info">Sky Blue</Badge>
            <Badge bg="light" text="dark">White</Badge>
            <Badge bg="dark">Black</Badge>
        </div>
)}

Output: