Skip to content
Related Articles

Related Articles

React Suite Button ts:Appearance Props

Improve Article
Save Article
  • Last Updated : 29 Jun, 2022
Improve Article
Save Article

React Suite is a front-end Javascript library built on top of ReactJS. It consists of a set of pre-built React components designed to make it easier for developers to build responsive interfaces faster. In this article, we will be seeing React Suite Button Prop ts:Appearance.

The Button component is used to display a simple button to the user. It has a property named appearance that accepts a value of type Appearance. The Appearance type is a user-defined type defined in the React Suite library. It is basically an enum of strings with values: ‘default’, ‘primary’, ‘link’, ‘subtle’, and ‘ghost’.

React Suite Button Prop ts:Appearance Props:

  • appearance: This is a property of the Button component that accepts a value of type ts:Appearance. 

Syntax:

<Button appearance="subtle"> ... </Button>

Creating The React Application And Installing React Suite in the Project:

Step 1: Create the React application using the npx command:

npx create-react-app foldername

Step 2: After creating the project folder, move to it using the cd command:

cd foldername

Step 3: After creating the ReactJS application, Install the rsuite module so that we can use the DatePicker component using the following command:

npm install rsuite

After following the above steps, the project structure will look like this:

 

Example 1: Now replace the code in the App.js file with the code below. In this example, we used the appearance prop of the Button component that accepts a value of type ts:Appearance to change the appearance of the Button.

Javascript




import "rsuite/dist/rsuite.min.css";
import React from "react";
import { Button } from "rsuite";
  
function App() {
    const ButtonStyle = { margin: "10px" };
  
    return (
        <div className="App" style={{ 
            textAlign: "center"
            padding: "0px 30px" 
        }}>
            <header style={{ 
                display: "block"
                marginBottom: "30px" 
            }}>
                <h3 style={{ color: "green" }}>
                    GeeksforGeeks
                </h3>
                <h5>React Suite Button prop ts:Appearance</h5>
            </header>
  
            <Button appearance="default" 
                style={ButtonStyle}>
                    Default Appearance Button
            </Button>
            <Button appearance="primary" 
                style={ButtonStyle}>
                    Primary Appearance Button
            </Button>
            <Button appearance="link" 
                style={ButtonStyle}>
                    Link Appearance Button
            </Button>
            <Button appearance="subtle" 
                style={ButtonStyle}>
                    Subtle Appearance Button
            </Button>
            <Button appearance="ghost" 
                style={ButtonStyle}>
                    Ghost Appearance Button
            </Button>
        </div>
    );
}
  
export default App;


Run the Application: Run your app using the following command from the root directory of the project.

npm start

Output: Go to http://localhost:3000/ in your browser to see the output.

 

Example 2: This example illustrates the use of color prop of the Button component with different Appearances.

Javascript




import "rsuite/dist/rsuite.min.css";
import React from "react";
import { Button } from "rsuite";
  
function App() {
    const ButtonStyle = { margin: "10px" };
    return (
        <div className="App" style={{ 
            textAlign: "center"
            padding: "0px 30px" 
        }}>
            <header style={{ 
                display: "block"
                marginBottom: "30px" 
            }}>
                <h3 style={{ color: "green" }}>
                    GeeksforGeeks
                </h3>
                <h5>React Suite Button prop ts:Appearance</h5>
            </header>
  
            <Button appearance="default" color="yellow" 
                style={ButtonStyle}>
                    Default Appearance Button
            </Button>
            <Button appearance="primary" color="red" 
                style={ButtonStyle}>
                    Primary Appearance Button
            </Button>
            <Button appearance="link" color="cyan" 
                style={ButtonStyle}>
                    Link Appearance Button
            </Button>
            <Button appearance="subtle" color="green" 
                style={ButtonStyle}>
                    Subtle Appearance Button
            </Button>
            <Button appearance="ghost" color="blue" 
                style={ButtonStyle}>
                    Ghost Appearance Button
            </Button>
        </div>
    );
}
  
export default App;


Output:

 

Reference: https://rsuitejs.com/components/button/#code-ts-appearance-code


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!