React Suite Button ts:Appearance Props

Last Updated : 29 Jun, 2022

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;