React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Button component is used to fire an action when the user clicks the button. In this article, we will be learning about the React Suite Button Active.
To make a Button visually active, the active property of the Button component is used. This property can be useful when we want to make the button be in the active state without user interaction.
React Suite Button Active Components:
- Button: This is the most basic component used to create a button.
React Suite Button Active Props:
- active: This is a boolean prop of the Button component used to style the Button as if it is in the active state.
- appearance: This property is used to change the appearance of the button component. It can have any of the five values: default, primary, link, subtle, or ghost.
Syntax:
<Button active>Active Button</Button>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: Move to the newly created project folder using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module (rsuite in this case) using the following command:
npm install rsuite
Project Structure: After completing the above steps, the project structure will look like the following:
Project Structure
Example 1: In this example, we used the Button component’s active property to style it as if it is in the active state.
Javascript
import React from "react"; import { Button } from "rsuite"; // Default CSS import "rsuite/dist/rsuite.min.css"; function App() { const ButtonStyle = { margin: "10px 10px" }; return ( <div className="App" style={ { textAlign: "center", padding: "0 30px" }}> <header style={ { display: "block", marginBottom: "20px" }}> <h3 style={{ color: "green" }}> neveropen </h3> <h5>React Suite Button Active</h5> </header> <h4>Normal Buttons</h4> <Button appearance="default" style={ButtonStyle}> Default Button </Button> <Button appearance="primary" style={ButtonStyle}> Primary Button </Button> <Button appearance="link" style={ButtonStyle}> Link Button </Button> <Button appearance="ghost" style={ButtonStyle}> Ghost Button </Button> <Button appearance="subtle" style={ButtonStyle}> Subtle Button </Button> <br /> <h4>Active Buttons</h4> <Button active appearance="default" style={ButtonStyle}> Active Default Button </Button> <Button active appearance="primary" style={ButtonStyle}> Active Primary Button </Button> <Button active appearance="link" style={ButtonStyle}> Link Active Button </Button> <Button active appearance="ghost" style={ButtonStyle}> Ghost Active Button </Button> <Button active appearance="subtle" style={ButtonStyle}> Subtle Active 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: In this example, we used the size property of the Button component along with the active property to change the size of active Buttons.
Javascript
import React from "react"; import { Button } from "rsuite"; // Default CSS import "rsuite/dist/rsuite.min.css"; function App() { const ButtonStyle = { margin: "10px 10px" }; return ( <div className="App" style={ { textAlign: "center", padding: "0 30px" } }> <header style={{ display: "block", marginBottom: "20px" }}> <h3 style={{ color: "green" }}> neveropen</h3> <h5>React Suite Button Active - Size Variation</h5> </header> <Button active size="xs" appearance="default" style={ButtonStyle}> Active Default Button </Button> <Button active size="sm" appearance="primary" style={ButtonStyle}> Active Primary Button </Button> <Button active size="md" appearance="link" style={ButtonStyle}> Link Active Button </Button> <Button active size="lg" appearance="ghost" style={ButtonStyle}> Ghost Active Button </Button> <Button active appearance="subtle" style={ButtonStyle}> Subtle Active Button </Button> </div> ); } export default App; |
Output:
Reference: https://rsuitejs.com/components/button/#active
