React Suite Button ts:Appearance Props
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.
<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:
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.
Run the Application: Run your app using the following command from the root directory of the project.
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.