React Suite Button Size

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. Here we will look into the size property.

Size Prop: the size prop sets the size of the button component.

There are four alternatives that are available.

• 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 size=""> </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: 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”.

The buttons are having two props one is a size that defines the size of the button component and another is the appearance that determines how the button will appear.

We have created four buttons with the appearance as ghost but varying sizes that are defined as ‘lg’, ‘md’, ‘sm’, ‘xs’.

App.js

import { Button } from "rsuite";
import "rsuite/dist/rsuite.min.css";//adding style
function App() {
    return (
        <div className="App">
            <h4>React Suite Button Size</h4>
            <Button appearance="ghost" size="xs">
                Xsmall
            </Button>
            <br />
            <Button appearance="ghost" size="sm">
                Small
            </Button>
            <br />
            <Button appearance="ghost" size="md">
                Medium
            </Button>{" "}
            <br />
            <Button appearance="ghost" size="lg">
                Large
            </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:

Reference: https://rsuitejs.com/components/button/