ReactJS Semantic UI Label 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, JQuery language to incorporate in different frameworks.

In this article we will know how to use label elements in ReactJS Semantic UI. Label element is used to display content classification

Properties:

• Pointing: We can make label that points to content by using pointing property.
• Prompt: We can make label that prompt for errors in form by using this property.
• Corner: We can make label that position itself in the corner by using this property.
• Tag: This property can make label that appear as a tag.
• Ribbon: We can make label that appear as a ribbon using this property.
• Attached:We can make label that is attached.
• Horizontal: We can make a horizontal label by using horizontal property.
• Floating: This property can make label to float on another element.

Syntax:

<label enabled/>

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: Install semantic UI in your given directory.

   npm install semantic-ui-react semantic-ui-css

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: In this example we will be going to use label and icon elements to display basic label by using ReactJS Semantic UI Label element.

App.js

import React from 'react'
import {Icon,Label} 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 Btt = () =>(
<Label>
    <br/>
    <Icon enabled name='angle double left' size='big' />
    <Icon enabled name='angle left' size='big' />
    <Icon enabled name='circle' size='big' />
    <Icon enabled name='angle right' size='big' />
    <Icon enabled name='angle double right' size='big' />
</Label>
)

export default Btt

Output: 

Example 2: In this example we will be going to use label and icon elements to display disabled label by using ReactJS Semantic UI Label element.

App.js

import React from 'react'
import {Icon,Label} 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 Btt = () =>(
<Label>
    <br/>
    <Icon disabled name='angle double left' size='big' />
    <Icon disabled name='angle left' size='big' />
    <Icon disabled name='circle' size='big' />
    <Icon disabled name='angle right' size='big' />
    <Icon disabled name='angle double right' size='big' />
</Label>
)

export default Btt

Output:

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