ReactJS Semantic UI Step Element Last Updated : 20 Jun, 2021 Comments Improve Suggest changes Like Article Like Report 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 the step element in ReactJS Semantic UI. Step element is used to track the completion of series of processes. States: Disabled: This state indicates that a step can't be selected.Active: Step can be highlighted as currently active.Completed: This state is used to indicate the step which has been completed by the user. Syntax: <step> <step.content/> </step> 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 icon and step elements to show completion status of activity by using ReactJS Semantic UI Step element. App.js import React from 'react' import { Icon, Step } 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 = () => ( <div> <br/> <Step.Group> <Step> <Icon name='html5'/> <Step.Content> <Step.Title>HTML</Step.Title> <Step.Description>GeeksforGeeks</Step.Description> </Step.Content> </Step> <Step> <Icon name='js'/> <Step.Content> <Step.Title>JavaScript</Step.Title> <Step.Description>GeeksforGeeks</Step.Description> </Step.Content> </Step> <Step> <Icon name='react'/> <Step.Content> <Step.Title>ReactJS</Step.Title> <Step.Description>GeeksforGeeks</Step.Description> </Step.Content> </Step> <Step> <Icon name='angular'/> <Step.Content> <Step.Title>AngularJS</Step.Title> <Step.Description>GeeksforGeeks</Step.Description> </Step.Content> </Step> </Step.Group> </div> ) export default Btt Output: Example 2: In this example we will be going to use the icon and step elements with the disabled state so that step can show that it cannot be selected by using ReactJS Semantic UI Step element. App.js import React from 'react' import { Icon, Step } 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 = () => ( <div> <br/> <Step.Group> <Step> <Icon name='html5'/> <Step.Content> <Step.Title>HTML</Step.Title> <Step.Description>GeeksforGeeks</Step.Description> </Step.Content> </Step> <Step> <Icon name='js'/> <Step.Content> <Step.Title>JavaScript</Step.Title> <Step.Description>GeeksforGeeks</Step.Description> </Step.Content> </Step> <Step disabled> <Icon name='react'/> <Step.Content> <Step.Title>ReactJS</Step.Title> <Step.Description>GeeksforGeeks</Step.Description> </Step.Content> </Step> <Step disabled> <Icon name='angular'/> <Step.Content> <Step.Title>AngularJS</Step.Title> <Step.Description>GeeksforGeeks</Step.Description> </Step.Content> </Step> </Step.Group> </div> ) export default Btt Output: Reference: https://react.semantic-ui.com/elements/step Comment More infoAdvertise with us Next Article ReactJS Semantic UI Step Element taran910 Follow Improve Article Tags : Web Technologies ReactJS Semantic-UI Similar Reads ReactJS Semantic UI Rail 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 rail element in ReactJS S 2 min read ReactJS Semantic UI List 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 the List element in React 2 min read ReactJS Semantic UI Input 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 see how to use input elements in ReactJS 2 min read 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 3 min read ReactJS Semantic UI image 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 image elements in ReactJ 2 min read 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 Sema 2 min read ReactJS Semantic UI Loader 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 the Loader element in Rea 2 min read ReactJS Semantic UI header 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 the header element in Rea 2 min read ReactJS Semantic UI Segment 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 segment elements in React 2 min read ReactJS Semantic UI container 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 Container elements in Re 2 min read Like