Thursday, October 23, 2025
HomeLanguagesJavascriptReactJS Blueprint Button Component

ReactJS Blueprint Button Component

BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. Button Component provides a way for users to take actions, and make choices, with a single tap. We can use the following approach in ReactJS to use the ReactJS Blueprint Button Component.

Button Props:

  • active: The button will display in an active state if this is set to true.
  • alignText: It is used for the text alignment within the button. 
  • className: It is used to denote a space-delimited list of class names to pass along to a child element.
  • disabled: It is used to indicate whether this action is non-interactive or not.
  • elementRef: It is used to denote a ref handler or a ref object that receives the native HTML element rendered by this component.
  • fill: It is used to indicate whether this button should expand to fill its container or not.
  • icon: It is used to denote the name of a Blueprint UI icon (or an icon element) to render before the text.
  • intent: It is used to denote the visual intent color to apply to the element.
  • large: It is used to indicate whether this button should use large styles or not.
  • loading: The button will display a centered loading spinner instead of its contents when this is set to true.
  • minimal: It is used to indicate whether this button should use minimal styles or not.
  • onClick: It is used to denote the click event handler.
  • outline: It is used to indicate whether this button should use outlined styles or not.
  • rightIcon: It is used to denote the name of a Blueprint UI icon (or an icon element) to render after the text.
  • small: It is used to indicate whether this button should use small styles or not.
  • text: It is used to denote the action text. 
  • type: It is used to denote the HTML type attribute of the button. 

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.

Project Structure

Example: Now 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 { Button } from "@blueprintjs/core";
 
function App() {
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Blueprint Button Component</h4>
            <Button>Sample Button</Button> <br></br>
            <Button icon="refresh">Icon Button</Button>
        </div>
    );
}
 
export default App;


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

npm start

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

Example 2: Another example, showing a disabled button, colored button and a button with 2 icons is shown

Javascript




import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Button } from "@blueprintjs/core";
 
function App() {
    return (
        <div>
    <h1 style={{color:'green'}}>neveropen</h1>
            <h3>ReactJS Blueprint Button Component</h3>
            <Button disabled>Disabled Button</Button> <br/><br/>
      <Button icon="refresh" intent="danger" text="Coloured Button" />
      <br /><br/>
      <Button icon="user" rightIcon="caret-down" text="Button with 2 icons" />       
         </div>
    );
}
 
export default App;


Output:

 

Reference: https://blueprintjs.com/docs/#core/components/button

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32361 POSTS0 COMMENTS
Milvus
88 POSTS0 COMMENTS
Nango Kala
6728 POSTS0 COMMENTS
Nicole Veronica
11892 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11954 POSTS0 COMMENTS
Shaida Kate Naidoo
6852 POSTS0 COMMENTS
Ted Musemwa
7113 POSTS0 COMMENTS
Thapelo Manthata
6805 POSTS0 COMMENTS
Umr Jansen
6801 POSTS0 COMMENTS