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
