JavaScriptJavaScriptAngularAngularVueVueReactReact

Getting Started with React Button 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/button/basic/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 './App.css';
import React from "react";
import { Button } from 'smart-webcomponents-react/button';

const App = () => {
  return (
    <div>
      <div className="demo-horizontal-layout">
        <div>
          <label>Default Buttons</label>
          <div className="demo-buttons-group">
            <Button>Normal</Button>
            <Button className="raised">Raised</Button>
            <Button className="outlined">Outlined</Button>
            <Button className="flat">Flat</Button>
            <Button className="floating">
              <span className="button-demo-icon demo-icon demo-device-icon-phone-portrait demo-button-demo-icon">
                <i className="material-icons">&#xE53F;</i>
              </span>
            </Button>
          </div>
        </div>
        <div>
          <label>Primary Buttons</label>
          <div className="demo-buttons-group">
            <Button className="primary">Normal</Button>
            <Button className="raised primary">Raised</Button>
            <Button className="outlined primary">Outlined</Button>
            <Button className="flat primary">Flat</Button>
            <Button className="floating primary">
              <span className="button-demo-icon demo-icon demo-device-icon-phone-portrait demo-button-demo-icon">
                <i className="material-icons">&#xE53F;</i>
              </span>
            </Button>
          </div>
        </div>
        <div>
          <label>Secondary Buttons</label>
          <div className="demo-buttons-group">
            <Button className="secondary">Normal</Button>
            <Button className="raised secondary">Raised</Button>
            <Button className="outlined secondary">Outlined</Button>
            <Button className="flat secondary">Flat</Button>
            <Button className="floating secondary">
              <span className="button-demo-icon demo-icon demo-device-icon-phone-portrait demo-button-demo-icon">
                <i className="material-icons">&#xE53F;</i>
              </span>
            </Button>
          </div>
        </div>
        <div>
          <label>Success Buttons</label>
          <div className="demo-buttons-group">
            <Button className="success">Normal</Button>
            <Button className="raised success">Raised</Button>
            <Button className="outlined success">Outlined</Button>
            <Button className="flat success">Flat</Button>
            <Button className="floating success">
              <span className="button-demo-icon demo-icon demo-device-icon-phone-portrait demo-button-demo-icon">
                <i className="material-icons">&#xE53F;</i>
              </span>
            </Button>
          </div>
        </div>
        <div>
          <label>Error Buttons</label>
          <div className="demo-buttons-group">
            <Button className="error">Normal</Button>
            <Button className="raised error">Raised</Button>
            <Button className="outlined error">Outlined</Button>
            <Button className="flat error">Flat</Button>
            <Button className="floating error">
              <span className="button-demo-icon demo-icon demo-device-icon-phone-portrait demo-button-demo-icon">
                <i className="material-icons">&#xE53F;</i>
              </span>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

4 Run the dev server

npm run dev

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

Alternative: Next.js

Create an app with npx create-next-app@latest (Pages Router or App Router). Install the same package (npm install smart-webcomponents-react), then reuse the imports and default export from step 3 in pages/_app.tsx, the App Router root app/layout.tsx, or your top-level layout component so styles and the widget tree load once.

TypeScript Support

Types ship with smart-webcomponents-react. Import the component and prop types:

import type { Button, ButtonProps } from 'smart-webcomponents-react/button';

The generated wrappers expose on* callbacks (for example onChange) whose arguments are standard DOM Event values unless the widget typings narrow them further.

Accessibility

The Button component follows WAI-ARIA best practices:

  • Keyboard navigation - Tab, Arrow keys, Enter, and Escape are supported
  • ARIA roles - Appropriate roles and labels are applied automatically
  • Focus management - Visible focus indicators for keyboard users
  • Screen readers - State changes are announced to assistive technology
  • High contrast - Supports Windows High Contrast Mode and forced colors

For custom labeling, set aria-label or aria-labelledby attributes on the component.

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.