React.js Blueprint CSS Tag Component

Last Updated : 28 Jul, 2022

BlueprintJS is a React-based UI toolkit for the web. This package is widely used and well optimised for creating complicated, data-dense desktop application interfaces. It is possible to categorise or markup using tag components. Lists of strings benefit greatly from tags. The ReactJS Blueprint Tag Component may be used in ReactJS using the following method.

The CSS properties and classes used by BlueprintJS Tags are:

bp4-large: This class is used to make the tags large in size.
bp4-minimal: This class is used to set the minimal appearance.
bp4-round: This class is used to make the tags round in shape.
bp4-interactive: This class is used to set hover and active effects.
bp4-intent-primary: This class is used to make the intent primary and sets the colour to blue.
bp4-intent-success: This class is used to set the tag status success by changing its colour to green.
bp4-intent-warning: This class is used to set the tag status warning by changing its colour to orange.
bp4-intent-danger: This class is used to set the tag status danger by changing its colour to red.

Syntax:

<Tag className={"bp4-tag ..."}>
    ...
</Tag>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure: It will look like the following.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Example 1: The following code demonstrates the BlueprintJS Tag with large, minimal, rounded and interactive tag CSS. Write down the following code in the App.js file. Here, App is our default component where we have written our code.

Javascript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import { Tag } from "@blueprintjs/core"; 
  
function App() { 
    return ( 
        <div style={{ 
            display: 'block', width: 400, padding: 30, 
            backgroundColor: 'light-green', color: 'green'
        }}> 
            <h1>GeeksforGeeks</h1> 
            <h4>ReactJS Blueprint Tag Component</h4> 
            <Tag className={"bp4-tag bp4-large"}> 
                Large Tag</Tag> 
            <br></br> <br></br> 
            <Tag className={"bp4-tag bp4-minimal"} > 
                Minimal Tag</Tag> 
            <br></br> <br></br> 
            <Tag className={"bp4-tag bp4-round"} > 
                Rounded Tag</Tag> 
            <br></br> <br></br> 
            <Tag className={"bp4-tag bp4-interactive"} > 
                Interactive Tag</Tag> 
        </div > 
    ); 
} 
  
export default App; 

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: The following code demonstrates the BlueprintJS Tag with primary, success, warning and danger tag CSS.

Javascript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import { Tag } from "@blueprintjs/core"; 
  
function App() { 
    return ( 
        <div style={{ 
            display: 'block', width: 400, padding: 30, 
            backgroundColor: 'light-green', color: 'green'
        }}> 
            <h1>GeeksforGeeks</h1> 
            <h4>ReactJS Blueprint Tag Component</h4> 
            <Tag className={"bp4-tag bp4-intent-primary"}> 
                Primary Tag</Tag> 
            <br></br> <br></br> 
            <Tag className={"bp4-tag bp4-intent-success"} > 
                Success Tag</Tag> 
            <br></br> <br></br> 
            <Tag className={"bp4-tag bp4-intent-warning"} > 
                Warning Tag</Tag> 
            <br></br> <br></br> 
            <Tag className={"bp4-tag bp4-intent-danger"} > 
                Danger Tag</Tag> 
        </div > 
    ); 
} 
  
export default App; 