React Suite Buttons Props

React Suite is a front-end library designed for the middle platform and back-end products.

Button Component allows the user to interact with the webpage. The Button Component has a number of properties of its own like appearance, size, color, etc.

The props are:

active: It is a boolean value. It denotes whether the button is in an active state or not. It is true by default.
appearance: It defines the way the button appears on the screen. It takes either of the values: ‘default’ , ‘primary’ , ‘link’ , ‘subtle’ ,’ghost’. It is ‘default’ by default.
as: It denotes the element type of the component. It is ‘button’ by default but one can custom the element for this component.
block: It is a boolean value. It spans the full width of the Button parent. It is true by default.
children *: the primary content of the component.
classPrefix: This denotes the prefix of the component CSS class. Specifying any value here will change the name of the class of the Component. This can be useful for applying custom styling based on the class name. The default value is “btn”.
color: It denotes the color of the Button component.
disabled: It is a boolean value. It denotes that the button is unable to be interacted with. It is true by default.
href: It takes a hyperlink.
loading: It is a boolean value. It shows the loading indicator. It is true by default.
size: It defines the different sizes of the Button component. xs:- the smallest size that is available, sm:- it is the size small a bit bigger than the size xs. md: the medium size which is bigger than the sm, lg: the largest size available.

Syntax:

<Button> </Button>

Prerequisite: Introduction and installation reactJs

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.

npm create-react-app project

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

cd project

Step 3: Now install the dependency by using the following command:

npm install rsuite

Project Structure: It will look like this:

Example 1: We are importing the Button Component from rsuite, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.

For the first three buttons, we are looking into the props like color, appearance, active, disable, of the button component.

Then we are passing different values to the as prop of the button component followed by passing on different values to the classPrefix prop of the component.

App.js

import { useState } from "react"; 

import { Button, Message, Notification } from "rsuite"; 

import "rsuite/dist/rsuite.min.css"; 

function App() { 

    return ( 

        <div className="App"> 

            <h4>React Suite Button Prop</h4> 

            <Button color="orange" appearance="primary"> 

                Primary Button 

            </Button> 

            <Button color="green" appearance="ghost" active> 

                Ghost 

            </Button> 

            <Button color="green" disabled appearance="link"> 

                Disabled 

            </Button> 

            <hr /> 

            <p 

                style={{ 

                    textAlign: "center", 

                    color: "red", 

                    marginBottom: 10, 

                    fontWeight: 900, 

                }} 

            > 

                as Prop 

            </p> 

            <Button as="em">Button as "em"</Button> 

            <hr /> 

            <p 

                style={{ 

                    textAlign: "center", 

                    color: "red", 

                    marginBottom: 10, 

                    fontWeight: 900, 

                }} 

            > 

                classPrefix Prop 

            </p> 

            <Button classPrefix="nav"> 

                Button classPrefix="nav"</Button> 

            <Button classPrefix="modal-title"> 

                Button classPrefix="modal-title"

            </Button> 

            <Button classPrefix="sidenav"> 

                Button classPrefix="sidenav"</Button> 

        </div> 

    ); 
} 

export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Example 2: To the first button passed the block prop, kept appearance as ‘primary’ and set color prop as ‘orange’. The second button kept the appearance as ‘primary’ and set the color prop as ‘green’ and added the loading prop.

To the third button kept the appearance of ‘ghost’ and used the size prop to pass a value of ‘lg’ defining large size. To the fourth button kept its appearance as ‘link’, passed a link to the href prop and set color as ‘violet’.

App.js

import { useState } from "react"; 

import { Button, Message, Notification } from "rsuite"; 

import "rsuite/dist/rsuite.min.css"; 

function App() { 

    return ( 

        <div className="App"> 

            <h4>React Suite Button Prop</h4> 

            <Button color="orange" appearance="primary" block> 

                Block Button 

            </Button> 

            <Button appearance="primary" color="green" loading> 

                Loading .. 

            </Button> 

            <hr /> 

            <Button appearance="ghost">Large Button</Button> 

            <Button 

                color="violet"

                appearance="link"

                href= 
"https://www.geeksforgeeks.org/react-suite-button-component/amp/"

            > 

                Link 

            </Button> 

        </div> 

    ); 
} 

export default App;