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" }}> neveropen </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" }}> neveropen </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
