Getting Started with React PowerButton Component

Smart UI React targets React 18+ and current Node LTS for tooling; use TypeScript templates when you want typed props and events.

Demo source (Smart UI repo): react/source/powerbutton/overview/App.jsx

1 Create a Vite + React + TypeScript app

1. npm create vite@latest my-smart-app -- --template react-ts

2. cd my-smart-app

   then

   npm install

2 Install Smart UI for React

npm install smart-webcomponents-react

3 Import styles and render the component

Open src/App.tsx (or App.jsx if you chose JavaScript). The snippet below matches Smart UI React demos for this widget:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import React from "react";
import ReactDOM from 'react-dom/client';
import { PowerButton } from "smart-webcomponents-react/button";
import { CircularProgressBar } from "smart-webcomponents-react/progressbar";

class App extends React.Component {

	componentDidMount() {

	}

	render() {
		return (
			<div>
				<div className="smart-demo-container">
					<section id="power-button">
						<div className="module">
							<p>Power button is a two-state type of toggle button with an indicator.</p>
							<p>Used as indicator.</p>
						</div>
						<div className="module power-button-flat-light">
							<div>
								<PowerButton></PowerButton>
								<br />
								<PowerButton hover></PowerButton>
								<br />
								<PowerButton checked></PowerButton>
								<br />
								<PowerButton disabled></PowerButton>
							</div>
						</div>
						<div className="module"></div>
						<div className="module power-button-light">
							<div>
								<PowerButton className="raised"></PowerButton>
								<br />
								<PowerButton className="raised"></PowerButton>
								<br />
								<PowerButton className="checked raised" checked></PowerButton>
								<br />
								<PowerButton className="raised" disabled></PowerButton>
							</div>
							<p>Raised Power button</p>
						</div>
						<div className="module power-button-dark">
							<h2>Demo usage</h2>
						</div>
						<div className="module power-button">
							<div>
								<CircularProgressBar id="progressBarAnimated" indeterminate value={100}>
									<PowerButton style={{ border: "none" }} id="powerButtonAnimation"></PowerButton>
								</CircularProgressBar>
							</div>
							<p>A power button can control the loading process.</p>
						</div>
					</section>
				</div>
			</div>
		);
	}
}



export default App;

4 Run the dev server

npm run dev

Open the URL Vite prints (often http://localhost:5173/).

import type { PowerButton, PowerButtonProps } from 'smart-webcomponents-react/powerbutton';

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.