ReactJS Semantic UI button Element

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS and jQuery to incorporate in different frameworks.

In this article, we will know how to use button element in ReactJS Semantic UI. Button element is used to make a button that will indicate a possible user action.

Syntax:

<Button content='Content'/>

Button Types:

• Button: It is used for a standard button.
• Emphasis: We can format buttons to show different levels of emphasis.
• Animated: It is used to animate buttons.
• Labeled: It is used to add a label to our button.
• Icon: It is used to make a button as an icon.
• Labeled Icon: It is used to make a button a labeled icon
• Inverted: It is used to make a button that can appear on a dark background.

Creating React Application And Installing Module:

• Step 1: Create a React application using the following command.

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command.

  cd foldername

• Step 3: After creating the ReactJS application, Install the required module using the following command:

  npm install semantic-ui-react

Project Structure: It will look like the following.

Step to Run Application: Run the application from the root directory of the project, using the following command.

npm start

Example 1:

App.js

import React from 'react'
import { Button } from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

const App = () => <Button>Submit</Button>

export default App

Output: 

Example 2: Making a button using shorthand.

App.js

import React from 'react'
import { Button } from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

const App = () => <Button content='Submit' />

export default App

Output:

Reference: https://react.semantic-ui.com/elements/button