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;
|
Output:
Reference: https://rsuitejs.com/components/button/#code-ts-appearance-code
Share your thoughts in the comments
Please Login to comment...