Getting Started with Vue PowerButton Component

Smart UI Vue examples target Vue 3 and Vite; enable TypeScript in create-vue when you want typed SFCs.

Demo source (Smart UI repo): vue/vue-3/src/powerbutton/overview/App.vue

Scaffold with Vite (Vue 3)

Run the official scaffolding tool:

npm create vue@latest

You will be prompted for TypeScript, Router, Pinia, and other options. When unsure, accept defaults and enable features later.

cd <your-project-name>
npm install
npm install smart-webcomponents
npm run dev
	

Vue + TypeScript

If you enabled TypeScript, use vite.config.ts with the same isCustomElement configuration as below so the compiler treats Smart UI tags as native custom elements.

Teach Vue about custom elements

Without this, Vue warns about unknown custom elements. Open vite.config.js or vite.config.ts and configure the Vue plugin so smart-* and legacy jqx-* tags are passed through to the DOM:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('smart-') || tag.startsWith('jqx-')
        }
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
	

App.vue example

Example from Smart UI Vue 3 demos for this widget:

<template>
  <div class="vue-root">
    <div class="smart-demo-container">
      <section id="power-button">
        <div class="module">
          <p>Power button is a two-state type of toggle button with an indicator.</p>
          <p>Used as indicator.</p>
        </div>
        <div class="module power-button-flat-light">
          <div>
            <smart-power-button></smart-power-button>
            <br />
            <smart-power-button hover></smart-power-button>
            <br />
            <smart-power-button checked></smart-power-button>
            <br />
            <smart-power-button disabled></smart-power-button>
          </div>
        </div>
        <div class="module"></div>
        <div class="module power-button-light">
          <div>
            <smart-power-button class="raised"></smart-power-button>
            <br />
            <smart-power-button class="raised"></smart-power-button>
            <br />
            <smart-power-button class="checked raised" checked></smart-power-button>
            <br />
            <smart-power-button class="raised" disabled></smart-power-button>
          </div>
          <p>Raised Power button</p>
        </div>
        <div class="module power-button-dark">
          <h2>Demo usage</h2>
        </div>
        <div class="module power-button">
          <div>
            <smart-circular-progress-bar id="progressBarAnimated" indeterminate value="100">
              <smart-power-button style="border:none;" id="powerButtonAnimation"></smart-power-button>
            </smart-circular-progress-bar>
          </div>
          <p>A power button can control the loading process.</p>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.button.js";

export default {
  name: "app",
  setup() {
    onMounted(() => {
      document
        .getElementById("powerButtonAnimation")
        .addEventListener("change", function(event) {
          document.getElementById("progressBarAnimated").indeterminate = event
            .detail.value
            ? false
            : true;
        });
    });
  }
};
</script>

<style>
/* ------------ Google fonts ------------ */

/* fallback */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)
    format("woff2");
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* ------------ */

.smart-demo-container {
  line-height: 24px;
  font-size: 13px;
  margin-left: 0;
  margin: 5% 10%;
  padding-top: 50px;
}

.smart-demo-container section h1 {
  font-weight: 400;
  font-size: 24px;
  line-height: 40px;
  margin-bottom: 30px;
  color: #764ebe;
}

.smart-demo-container section:first-of-type h1 {
  font-size: 34px;
  border-top: initial;
}

.smart-demo-container section:first-of-type div h1 {
  font-size: 20px;
}

.smart-demo-container section {
  margin-top: 80px;
}

.smart-demo-container section:first-of-type {
  margin-top: 0;
}

.smart-demo-container section div h1 {
  color: #212121;
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  margin-bottom: 20px;
  max-width: 940px;
}

.smart-demo-container nav {
  display: block;
  border-left: 5px #3949ab solid;
  padding-left: 20px;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  font: inherit;
  margin-top: 60px;
}

.smart-demo-container nav ul {
  list-style: none;
  margin-top: 0;
  padding-left: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  display: block;
  list-style-type: disc;
}

.smart-demo-container nav li {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-size: 20px;
  line-height: 40px;
}

.smart-demo-container nav li a {
  text-decoration: none;
}

.smart-demo-container nav h1 {
  font-size: 15px;
  line-height: 16px;
  padding-bottom: 12px;
  font-weight: 400;
  color: #757575;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}

.module {
  width: calc(100% / 4);
  display: inline-block;
  font: inherit;
  margin-right: 40px;
  min-width: 365px;
  vertical-align: top;
}

.smart-demo-container #button-types .module:first-of-type {
  display: block;
  width: 100%;
}

.smart-demo-container .module h1,
.smart-demo-container .module h2 {
  -webkit-margin-before: 0;
  font-weight: 700;
}

.smart-demo-container #button-types .module,
.smart-demo-container #button-style .module {
  display: inline-block;
  margin-top: 30px;
}

.smart-demo-container #button-types figure {
  width: 100%;
  -webkit-margin-start: 0;
  margin-top: 40px;
}

.smart-demo-container #button-types .button-style,
.smart-demo-container #button-floating .specs-behavior {
  margin-top: 80px;
}

.smart-demo-container #button-types .button-style h1 {
  margin-top: initial;
}

.smart-demo-container #button-types .button-style:last-of-type {
  width: calc(100% / 2 + 45px);
}

.smart-demo-container #button-types .button-style:last-of-type figure {
  margin-top: initial;
}

.smart-demo-container #button-usage .usage-table {
  width: calc(100% / 2 + 45px);
}

.smart-demo-container section > h2:first-of-type {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-weight: 400;
  font-size: 24px;
  line-height: 40px;
  margin-bottom: 30px;
  color: #3949ab;
  padding-top: 80px;
}

.smart-demo-container #button-usage .usage-table p {
  margin-top: initial;
  margin-bottom: initial;
}

.smart-demo-container #button-usage table {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  font-size: 13px;
  width: 100%;
  margin-bottom: 40px;
  table-layout: auto;
}

.smart-demo-container #button-usage table tr:first-child td p {
  color: #757575;
  font-size: 13px;
  line-height: 24px;
  margin: 0 0 0.5em;
  max-width: 760px;
  word-wrap: break-word;
}

.smart-demo-container #button-usage table td {
  border: 1px solid #eee;
  line-height: 24px;
  padding: 12px 12px 12px 24px;
  color: #212121;
  vertical-align: middle;
}

.smart-demo-container #button-flat .button-light,
.smart-demo-container #button-flat .button-dark,
.smart-demo-container #button-raised .button-light,
.smart-demo-container #button-raised .button-dark,
.smart-demo-container #button-floating .button-light,
.smart-demo-container #button-floating .button-dark {
  text-align: center;
}

.smart-demo-container #button-flat .button-dark p,
.smart-demo-container #button-flat .button-light p,
.smart-demo-container #button-raised .button-dark p,
.smart-demo-container #button-raised .button-light p,
.smart-demo-container #button-floating .button-light p,
.smart-demo-container #button-floating .button-dark p,
.smart-demo-container #repeat-buttons-specs-behavior .repeat-button-light p,
.smart-demo-container #repeat-buttons-specs-behavior .repeat-button-dark p {
  margin: initial;
  -webkit-margin-before: initial;
  -webkit-margin-after: initial;
  text-align: left;
}

.smart-demo-container #button-flat .button-dark p:first-of-type,
.smart-demo-container #button-flat .button-light p:first-of-type,
.smart-demo-container #button-raised .button-dark p:first-of-type,
.smart-demo-container #button-raised .button-light p:first-of-type,
.smart-demo-container
  #repeat-buttons-specs-behavior
  .repeat-button-light
  p:first-of-type,
.smart-demo-container
  #repeat-buttons-specs-behavior
  .repeat-button-dark
  p:first-of-type {
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
}

.smart-demo-container #button-flat .button-light div,
.smart-demo-container #button-raised .button-light div,
.smart-demo-container #button-floating .button-light div {
  background-color: #eeeeee;
  padding: 50px;
}

.smart-demo-container #button-flat .button-dark > div,
.smart-demo-container #button-raised .button-dark > div,
.smart-demo-container #button-floating .button-dark > div {
  background-color: #333333;
  color: #fff;
  text-align: center;
  padding: 50px;
}

.smart-demo-container #button-flat .module,
.smart-demo-container #button-raised .module,
.smart-demo-container #button-floating .module {
  height: 100%;
}

.smart-demo-container #button-flat .module h2,
.smart-demo-container #button-raised .module h2,
.smart-demo-container #button-floating .module h2,
.smart-demo-container #button-floating-demo .module h2 {
  font-weight: 500;
}

.smart-demo-container #button-flat-demo .flat-demo,
.smart-demo-container #button-flat-demo .flat-demo2 {
  position: relative;
  height: 700px;
  background-color: #eeeeee;
  text-align: center;
  background-image: url(../../../images/flat-button-demo.png);
  background-size: cover;
  background-position: center;
}

.smart-demo-container #button-flat-demo .flat-demo button,
.smart-demo-container #button-flat-demo .flat-demo2 button {
  color: var(--smart-hover-color);
}

.smart-demo-container #button-flat-demo .flat-demo smart-button {
  position: absolute;
  top: calc(50% + 45px);
  left: 0;
}

.smart-demo-container #button-flat-demo .flat-demo smart-button:nth-child(2) {
  left: 95px;
}

.smart-demo-container #button-flat-demo .flat-demo2 {
  background-image: url(../../../images/flat-button-demo2.png);
}

.smart-demo-container #button-flat-demo .flat-demo2 smart-button {
  position: absolute;
  top: calc(50% + 40px);
  left: calc(100% - 130px);
}

.smart-demo-container #button-flat-demo .flat-demo2 smart-button:nth-child(2) {
  left: calc(100% - 225px);
}

.smart-demo-container #button-flat-demo h2 {
  font-weight: 500;
}

.smart-demo-container #button-floating-demo .floating-action-area,
.smart-demo-container #button-raised-demo .raised-demo,
.smart-demo-container #button-raised-demo .raised-demo2,
.smart-demo-container .floating-demo-start,
.smart-demo-container .raised-demo-start,
.smart-demo-container .flat-demo-start {
  position: relative;
  height: 700px;
  background-color: #eeeeee;
  text-align: center;
  background-image: url(../../../images/raised-button-demo.png);
  background-size: cover;
  background-position: center;
}

.smart-demo-container #button-raised-demo .raised-demo button,
.smart-demo-container #button-raised-demo .raised-demo2 button {
  color: var(--smart-hover-color);
}

.smart-demo-container .raised-demo-start smart-button,
.smart-demo-container #button-raised-demo .raised-demo smart-button {
  position: absolute;
  top: 25%;
  left: 18%;
  width: 125px;
}

.smart-demo-container .raised-demo-start smart-button button,
.smart-demo-container #button-raised-demo .raised-demo smart-button button {
  --smart-material-background-color: transparent;
  color: #555;
}

.smart-demo-container .raised-demo-start smart-button:nth-child(2),
.smart-demo-container
  #button-raised-demo
  .raised-demo
  smart-button:nth-child(2) {
  left: calc(22% + 125px);
}

.smart-demo-container .raised-demo-start smart-button:nth-child(2) button,
.smart-demo-container
  #button-raised-demo
  .raised-demo
  smart-button:nth-child(2)
  button {
  background-color: #ff5252;
  color: #fff;
}

.smart-demo-container .raised-demo-start smart-button:nth-child(3),
.smart-demo-container
  #button-raised-demo
  .raised-demo
  smart-button:nth-child(3) {
  top: 68%;
  left: 18%;
}

.smart-demo-container #button-raised-demo .raised-demo2 {
  background-image: url(../../../images/raised-button-demo2.png);
}

.smart-demo-container #button-raised-demo .raised-demo2 smart-button {
  position: absolute;
  top: 42.5%;
  left: 14%;
  width: 100px;
}

.smart-demo-container #button-raised-demo .raised-demo2 smart-button button {
  --smart-material-background-color: transparent;
  color: #2396f1;
}

.smart-demo-container
  #button-raised-demo
  .raised-demo2
  smart-button:nth-child(2) {
  left: calc(14% + 115px);
}

.smart-demo-container
  #button-raised-demo
  .raised-demo2
  smart-button:nth-child(3) {
  top: 71%;
}

.smart-demo-container #button-floating-demo .floating-action-area {
  background-image: url(../../../images/Album.png);
}

.smart-demo-container #button-floating-demo .floating-action-area div h2 {
  pointer-events: none;
}

.smart-demo-container #button-floating-demo .floating-action-area div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.smart-demo-container #button-floating-demo .floating-action-area smart-button {
  position: absolute;
  top: 70%;
  left: calc(100% - 70px);
  width: 56px;
  height: 56px;
}

.smart-demo-container
  #button-floating-demo
  .floating-action-area
  #floating-hover-action {
  position: absolute;
  top: 70%;
  left: calc(50% - 20px);
}

.smart-demo-container
  #button-floating-demo
  .floating-action-area
  .floating-click-sub-action:nth-of-type(2) {
  top: 60%;
  transition: top 0.2s ease-in;
  width: 45px;
  height: 45px;
  left: calc(100% - 65px);
}

.smart-demo-container
  #button-floating-demo
  .floating-action-area
  .floating-click-sub-action:nth-of-type(3) {
  top: 50%;
  transition: top 0.2s ease-in;
  width: 45px;
  height: 45px;
  left: calc(100% - 65px);
}

.smart-demo-container
  #button-floating-demo
  .floating-action-area
  .floating-click-sub-action.smart-visibility-hidden:nth-of-type(2),
.smart-demo-container
  #button-floating-demo
  .floating-action-area
  .floating-click-sub-action.smart-visibility-hidden:nth-of-type(3) {
  top: 70%;
  transition: animation, visibility 0.2s ease-out;
}

.smart-demo-container
  #button-floating-demo
  .floating-action-area
  .floating-click-sub-action.smart-visibility-hidden:nth-of-type(2) {
  animation: material-sub-button-top-hide 0.2s ease-out;
}

.smart-demo-container
  #button-floating-demo
  .floating-action-area
  .floating-click-sub-action.smart-visibility-hidden:nth-of-type(3) {
  animation: material-sub-button-middle-hide 0.2s ease-out;
}

@keyframes material-sub-button-top-hide {
  0% {
    top: 60%;
  }

  100% {
    top: 70%;
  }
}

@keyframes material-sub-button-middle-hide {
  0% {
    top: 50%;
  }

  100% {
    top: 70%;
  }
}

.smart-demo-container .floating-demo-start {
  background-image: url(../../../images/floating-demo-start.png);
}

.smart-demo-container .floating-demo-start smart-button {
  position: absolute;
  top: 61.5%;
  left: calc(100% - 66px);
  width: 60px;
  height: 60px;
  --smart-material-background-color: #0c9f59;
  --smart-material-focused-background-color: #099955;
  --smart-material-hovered-background-color: #0e874e;
  --smart-material-pressed-background-color: #078449;
}

.smart-demo-container .floating-demo-start button {
  color: #fff;
}

.smart-demo-container .raised-demo-start {
  background-image: url(../../../images/raised-button-demo.png);
}

.smart-demo-container .flat-demo-start {
  background-image: url(../../../images/flat-demo-start.png);
}

.smart-demo-container .flat-demo-start smart-button {
  background-color: transparent;
  position: absolute;
  top: 60%;
  left: 36.5%;
}

.smart-demo-container .flat-demo-start smart-button:nth-child(2) {
  left: 62.5%;
}

.smart-demo-container .flat-demo-start button {
  color: #2396f1;
}

.smart-demo-container #button-flat .button-dark smart-button,
.smart-demo-container #button-flat .button-light smart-button,
.smart-demo-container #button-raised .button-dark smart-button,
.smart-demo-container #button-raised .button-light smart-button,
.smart-demo-container #button-floating .button-dark smart-button,
.smart-demo-container #button-floating .button-light smart-button {
  margin-top: 35px;
}

.smart-demo-container #button-flat .button-light smart-button .ripple,
.smart-demo-container #button-raised .button-light smart-button .ripple,
.smart-demo-container #button-floating .button-light smart-button .ripple,
.smart-demo-container #floating-click-action .ripple,
.smart-demo-container .floating-click-sub-action .ripple {
  --smart-ripple-color: rgba(0, 0, 0, 0.1);
}

.smart-demo-container
  #button-flat
  .button-light
  smart-button:nth-child(3)
  button {
  background-color: var(--smart-material-focused-background-color);
}

.smart-demo-container
  #button-flat
  .button-light
  smart-button:nth-child(5)
  button {
  background-color: var(--smart-material-pressed-background-color);
}

.smart-demo-container
  #button-flat
  .button-dark
  smart-button:nth-child(3)
  button {
  background-color: var(--smart-material-focused-background-color);
}

.smart-demo-container
  #button-flat
  .button-dark
  smart-button:nth-child(5)
  button {
  background-color: var(--smart-material-pressed-background-color);
}

.smart-demo-container
  #button-raised
  .button-light
  smart-button:nth-child(3)
  button {
  background-color: var(--smart-material-pressed-background-color);
}

.smart-demo-container
  #button-raised
  .button-light
  smart-button:nth-child(5)
  button {
  background-color: var(--smart-material-focused-background-color);
}

.smart-demo-container #button-raised .button-light smart-button:nth-child(5),
.smart-demo-container #button-floating .button-light smart-button:nth-child(5) {
  box-shadow: 0.2px 5px 10px 3px rgba(189, 189, 189, 1);
}

.smart-demo-container
  #button-raised
  .button-dark
  smart-button:nth-child(3)
  button {
  background-color: var(--smart-material-focused-background-color);
}

.smart-demo-container
  #button-raised
  .button-dark
  smart-button:nth-child(5)
  button {
  background-color: var(--smart-material-pressed-background-color);
}

.smart-demo-container
  #button-floating
  .button-light
  smart-button:nth-child(3)
  button {
  background-color: var(--smart-material-focused-background-color);
}

.smart-demo-container
  #button-floating
  .button-light
  smart-button:nth-child(5)
  button {
  background-color: var(--smart-material-pressed-background-color);
}

.smart-demo-container
  #button-floating
  .button-dark
  smart-button:nth-child(3)
  button {
  background-color: var(--smart-material-focused-background-color);
}

.smart-demo-container
  #button-floating
  .button-dark
  smart-button:nth-child(5)
  button {
  background-color: var(--smart-material-pressed-background-color);
}

.smart-demo-container #toggle-button .toggle-button-container {
  background-color: #eeeeee;
  display: flex;
  justify-content: center;
  height: 50px;
  align-items: center;
}

.smart-demo-container #toggle-button .toggle-button-container div {
  display: flex;
  height: 30px;
  width: 50%;
  border-radius: 2px;
  box-shadow: 0.2px 1px 1px 1px rgba(0, 0, 0, 0.3);
  background-color: #fbfbfb;
  overflow: hidden;
}

.smart-demo-container #toggle-button .toggle-button-no-selection div {
  box-shadow: initial;
  border-radius: 2px;
  background-color: initial;
}

.smart-demo-container
  #toggle-button
  .toggle-button-container
  smart-toggle-button {
  height: 100%;
  flex-grow: 1;
  border-radius: initial;
  box-shadow: initial;
  background-color: initial;
}

.smart-demo-container
  #toggle-button
  .toggle-button-container
  smart-toggle-button
  button {
  display: flex;
  justify-content: center;
}

.smart-demo-container
  #toggle-button
  .toggle-button-container
  smart-toggle-button[checked] {
  border-right: 1px solid rgba(0, 0, 0, 0.45);
}

.smart-demo-container
  #toggle-button
  .toggle-button-container
  smart-toggle-button[checked]:last-of-type {
  border-right: initial;
}

.smart-demo-container #toggle-button-icons .module:nth-child(2),
.smart-demo-container #toggle-button-icons .module:nth-child(4) {
  width: calc(100% / 2);
}

.smart-demo-container .toggle-button-icons-container {
  background-color: #eeeeee;
  height: 350px;
}

.smart-demo-container #radio-button .radio-buttons-container-light,
.smart-demo-container #radio-button .radio-buttons-container-dark,
.smart-demo-container #check-box .check-box-container-light,
.smart-demo-container #check-box .check-box-container-dark,
.smart-demo-container #switch-button .switch-button-container-light,
.smart-demo-container #switch-button .switch-button-container-dark {
  background-color: #eeeeee;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 150px;
}

.smart-demo-container #radio-button .radio-buttons-container-dark,
.smart-demo-container #check-box .check-box-container-dark,
.smart-demo-container #switch-button .switch-button-container-dark {
  background-color: #000;
}

.smart-demo-container #toggle-button-icons table,
.smart-demo-container #led-button table,
.smart-demo-container #radio-button-light table,
.smart-demo-container #radio-button-dark table,
.smart-demo-container #check-box-light table,
.smart-demo-container #check-box-dark table,
.smart-demo-container #switch-button-light table,
.smart-demo-container #switch-button-dark table {
  width: 85%;
  height: 65%;
  margin-left: 7.5%;
  margin-top: 5%;
  text-align: center;
}

.smart-demo-container #radio-button-light .module:nth-child(1) p,
.smart-demo-container #radio-button-dark .module:nth-child(1) p,
.smart-demo-container #check-box-light .module:nth-child(1) p,
.smart-demo-container #check-box-dark .module:nth-child(1) p,
.smart-demo-container #switch-button-light .module:nth-child(1) p,
.smart-demo-container #switch-button-dark .module:nth-child(1) p {
  margin-bottom: initial;
  -webkit-margin-before: initial;
}

.smart-demo-container #led-button .module:nth-child(3),
.smart-demo-container #radio-button-light .module:nth-child(2),
.smart-demo-container #radio-button-dark .module:nth-child(2),
.smart-demo-container #check-box-light .module:nth-child(2),
.smart-demo-container #check-box-dark .module:nth-child(2),
.smart-demo-container #switch-button-light .module:nth-child(2),
.smart-demo-container #switch-button-dark .module:nth-child(2) {
  width: calc(100% / 2);
}

.smart-demo-container #led-button .led-buttons-table,
.smart-demo-container #radio-button-light .radio-buttons-table-light,
.smart-demo-container #radio-button-dark .radio-buttons-table-dark,
.smart-demo-container #check-box-light .check-box-table-light,
.smart-demo-container #check-box-dark .check-box-table-dark,
.smart-demo-container #switch-button-light .switch-button-table-light,
.smart-demo-container #switch-button-dark .switch-buttons-table-dark {
  height: 350px;
  background-color: #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.smart-demo-container #radio-button-dark .radio-buttons-table-dark,
.smart-demo-container #check-box-dark .check-box-table-dark,
.smart-demo-container #switch-button-dark .switch-buttons-table-dark {
  background-color: #000;
  color: rgba(255, 255, 255, 0.5);
}

.smart-demo-container #radio-button-light .radio-buttons-table-light,
.smart-demo-container #check-box-light .check-box-table-light,
.smart-demo-container #switch-button-light .switch-button-table-light {
  color: rgba(0, 0, 0, 0.5);
}

.smart-demo-container #radio-button-light smart-radio-button.focused,
.smart-demo-container #radio-button-dark smart-radio-button.focused,
.smart-demo-container #check-box-light smart-check-box.focused,
.smart-demo-container #check-box-dark smart-check-box.focused {
  background-color: var(--smart-material-focused-background-color);
}

.smart-demo-container #radio-button-light smart-radio-button[checked].focused,
.smart-demo-container #radio-button-dark smart-radio-button[checked].focused,
.smart-demo-container #check-box-light smart-check-box[checked].focused,
.smart-demo-container #check-box-dark smart-check-box[checked].focused,
.smart-demo-container #switch-button-light smart-switch-button[checked].focused,
.smart-demo-container #switch-button-dark smart-switch-button[checked].focused {
  background-color: var(--smart-material-focused-checked-background-color);
}

.smart-demo-container
  #switch-button-light
  smart-switch-button[checked].focused
  .smart-thumb::before,
.smart-demo-container
  #switch-button-dark
  smart-switch-button[checked].focused
  .smart-thumb::before,
.smart-demo-container
  #switch-button-light
  smart-switch-button[checked].pressed
  .smart-thumb::before,
.smart-demo-container
  #switch-button-dark
  smart-switch-button[checked].pressed
  .smart-thumb::before,
.smart-demo-container
  #switch-button-light
  smart-switch-button.focused
  .smart-thumb::before,
.smart-demo-container
  #switch-button-dark
  smart-switch-button.focused
  .smart-thumb::before,
.smart-demo-container
  #switch-button-light
  smart-switch-button.pressed
  .smart-thumb::before,
.smart-demo-container
  #switch-button-dark
  smart-switch-button.pressed
  .smart-thumb::before {
  transform: scale(1);
  animation: button-wave-effect 0.1s ease-in;
  background-color: var(--smart-material-pressed-background-color);
}

.smart-demo-container #led-button table,
.smart-demo-container #radio-button-light table,
.smart-demo-container #radio-button-dark table,
.smart-demo-container #check-box-light table,
.smart-demo-container #check-box-dark table,
.smart-demo-container #switch-button-light table,
.smart-demo-container #switch-button-dark table {
  margin-top: initial;
  margin-left: initial;
  border-collapse: collapse;
  table-layout: fixed;
}

.smart-demo-container #led-button table tr:nth-child(3) p {
  color: #fff;
}

.smart-demo-container #led-button table tr:nth-child(3) {
  background-color: #000;
}

.smart-demo-container .toggle-button-icons-container smart-toggle-button {
  background-color: transparent;
  box-shadow: initial;
}

.smart-demo-container .toggle-button-icons-container smart-toggle-button.hover {
  background-color: var(--smart-material-hovered-background-color);
}

.smart-demo-container
  .toggle-button-icons-container
  smart-toggle-button.focused {
  background-color: var(--smart-material-focused-background-color);
}

.smart-demo-container
  .toggle-button-icons-container
  smart-toggle-button.pressed
  button {
  color: var(--smart-material-pressed-background-color);
}

.smart-demo-container
  .toggle-button-icons-container
  smart-toggle-button.pressed
  button {
  color: var(--smart-material-pressed-color);
  background-color: rgba(0, 0, 0, 0.2);
}

.smart-demo-container #toggle-button-icons h3 {
  margin-top: initial;
  padding: 3.5%;
  padding-bottom: initial;
  color: var(--smart-material-color);
  font-weight: 400;
  color: #a9a9a9;
}

.smart-demo-container .toggle-button-icons-themes {
  display: flex;
  justify-content: center;
}

.smart-demo-container .toggle-button-icons-themes div {
  width: calc(100% / 5);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.smart-demo-container .toggle-button-icons-themes smart-toggle-button {
  width: 75px;
  height: 75px;
  font-size: 40px;
}

.smart-demo-container
  .toggle-button-icons-themes
  smart-toggle-button
  .material-icons {
  font-size: inherit;
}

.smart-demo-container .toggle-button-icons-themes smart-toggle-button button {
  font-size: inherit;
}

.smart-demo-container .toggle-button-icons-themes div:nth-child(1) {
  background-color: #2396f1;
  color: white;
}

.smart-demo-container
  .toggle-button-icons-themes
  div:nth-child(1)
  smart-toggle-button {
  --smart-material-color: #fff;
  --smart-material-pressed-color: #fff;
  --smart-material-background-color: #2396f1;
  --smart-material-focused-background-color: #729ce0;
  --smart-material-hovered-background-color: #2076c3;
  --smart-material-pressed-background-color: #009fef;
}

.smart-demo-container .toggle-button-icons-themes div:nth-child(2) {
  background-color: #00bcd5;
}

.smart-demo-container
  .toggle-button-icons-themes
  div:nth-child(2)
  smart-toggle-button {
  --smart-material-color: #fff;
  --smart-material-pressed-color: #000;
  --smart-material-background-color: #2396f1;
  --smart-material-focused-background-color: #35a4b7;
  --smart-material-hovered-background-color: #379bb2;
  --smart-material-pressed-background-color: #00a5b9;
}

.smart-demo-container
  .toggle-button-icons-themes
  div:nth-child(2)
  smart-toggle-button
  button {
  color: #000;
}

.smart-demo-container .toggle-button-icons-themes div:nth-child(3) {
  background-color: #eeeeee;
  color: #d94634;
}

.smart-demo-container
  .toggle-button-icons-themes
  div:nth-child(3)
  smart-toggle-button {
  --smart-material-color: #fff;
  --smart-material-pressed-color: #d94634;
  --smart-material-background-color: #2396f1;
  --smart-material-focused-background-color: #e5ceda;
  --smart-material-hovered-background-color: #e8b9c3;
  --smart-material-pressed-background-color: #e9c2bd;
}

.smart-demo-container
  .toggle-button-icons-themes
  div:nth-child(3)
  smart-toggle-button
  button {
  color: #d94634;
}

.smart-demo-container .toggle-button-icons-themes div:nth-child(4) {
  background-color: #000;
  color: #fff;
}

.smart-demo-container
  .toggle-button-icons-themes
  div:nth-child(4)
  smart-toggle-button {
  --smart-material-color: #fff;
  --smart-material-pressed-color: #fff;
  --smart-material-focused-background-color: #4c4c4c;
  --smart-material-hovered-background-color: #383838;
  --smart-material-pressed-background-color: #686868;
}

.smart-demo-container
  .toggle-button-icons-themes
  div:nth-child(4)
  smart-toggle-button
  button {
  color: #fff;
}

.smart-demo-container .toggle-button-icons-themes div:nth-child(5) {
  background-color: #000;
  color: #db4534;
}

.smart-demo-container
  .toggle-button-icons-themes
  div:nth-child(5)
  smart-toggle-button {
  --smart-material-color: #fff;
  --smart-material-pressed-color: #db4534;
  --smart-material-focused-background-color: #3f2803;
  --smart-material-hovered-background-color: #601209;
  --smart-material-pressed-background-color: #6a433e;
}

.smart-demo-container
  .toggle-button-icons-themes
  div:nth-child(5)
  smart-toggle-button
  button {
  color: #db4534;
}

.smart-demo-container .repeat-buttons-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #eeeeee;
  padding: 10px;
}

.smart-demo-container .progress-bar-container,
.smart-demo-container .progress-bar-container-dark-theme {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #eeeeee;
  padding: 10px;
}

.smart-demo-container .progress-bar-container-dark-theme {
  background-color: #000;
}

.smart-demo-container #progressBarCircularControl .smart-label-container,
.smart-demo-container #progressBarCircularControl2 .smart-label-container,
.smart-demo-container #progressBarAnimated .smart-label-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.smart-demo-container
  #progressBarCircularControl
  .smart-label-container
  smart-repeat-button {
  width: 100%;
  height: 50%;
}

.smart-demo-container
  #progressBarAnimated
  .smart-label-container
  smart-power-button {
  width: 100%;
  height: 100%;
}

.smart-demo-container
  #progressBarAnimated
  .smart-label-container
  smart-power-button
  .smart-input::after {
  font-size: 30px;
}

.smart-demo-container #progressBarCircularControl2 .smart-label-container {
  flex-direction: row;
}

.smart-demo-container
  #progressBarCircularControl2
  .smart-label-container
  smart-repeat-button {
  width: 50%;
  height: 100%;
}

.smart-demo-container #repeat-button-demo .repeat-buttons-container {
  flex-direction: column;
  height: 200px;
}

.smart-demo-container .repeat-buttons-container .material-icons {
  font-size: 35px;
}

.smart-demo-container .repeat-buttons-container smart-repeat-button {
  width: 50px;
  height: 50px;
}

.smart-demo-container #repeat-buttons-specs-behavior .module > div,
.smart-demo-container #power-button .power-button-light > div,
.smart-demo-container #power-button .power-button-dark > div,
.smart-demo-container #power-button .power-button-flat-light > div,
.smart-demo-container #power-button .power-button-flat-dark > div,
.smart-demo-container #led-button .led-button-light > div,
.smart-demo-container #led-button .led-button-dark > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px;
  height: 350px;
  background-color: #eeeeee;
}

.smart-demo-container #power-button .power-button-dark > div,
.smart-demo-container #led-button .led-button-dark > div,
.smart-demo-container #power-button .power-button-flat-dark > div {
  background-color: #333333;
  color: #fff;
  text-align: center;
  padding: 50px;
}

.smart-demo-container
  #repeat-buttons-specs-behavior
  .module:last-of-type
  > div {
  background-color: #000;
}

.smart-demo-container #repeat-buttons-specs-behavior smart-repeat-button,
.smart-demo-container #power-button .power-button-light smart-power-button,
.smart-demo-container #power-button .power-button-flat-light smart-power-button,
.smart-demo-container #power-button .power-button-flat-dark smart-power-button,
.smart-demo-container #power-button .power-button-dark smart-power-button {
  width: 50px;
  height: 50px;
}

/* Firefox Specific CSS */
@-moz-document url-prefix() {
  .smart-demo-container #power-button .power-button-light smart-power-button,
  .smart-demo-container
    #power-button
    .power-button-flat-light
    smart-power-button,
  .smart-demo-container
    #power-button
    .power-button-flat-dark
    smart-power-button,
  .smart-demo-container #power-button .power-button-dark smart-power-button {
    margin-top: 35px;
  }
}

.smart-demo-container
  #power-button
  .power-button-light
  > div
  smart-power-button:nth-child(3)
  .smart-input,
.smart-demo-container
  #power-button
  .power-button-dark
  > div
  smart-power-button:nth-child(3)
  .smart-input,
.smart-demo-container
  #power-button
  .power-button-flat-light
  > div
  smart-power-button:nth-child(3)
  .smart-input,
.smart-demo-container
  #power-button
  .power-button-flat-dark
  > div
  smart-power-button:nth-child(3)
  .smart-input {
  background-color: var(--smart-material-focused-background-color);
}

.smart-demo-container .button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 250px;
  background-color: #eeeeee;
}

.module h3 {
  margin-top: 30px;
}

.module p {
  margin-bottom: 20px;
}

.module img {
  width: 100%;
}

.smart-demo-container
  .floating-action-area
  #floating-hover-action.smart-visibility-hidden {
  animation: material-button-hide 0.2s ease-out;
  transition: animation, visibility 0.2s ease-out;
}

.smart-demo-container .floating-action-area #floating-hover-action {
  animation: material-button-appear 0.2s ease-in;
}

.smart-demo-container
  .floating-action-area
  #floating-hover-action.material-dark.floating:active {
  box-shadow: 0.2px 5px 10px 3px rgba(0, 0, 0, 0.3);
}

@keyframes material-button-appear {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes material-button-hide {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}
</style>
	

You can now use smart-power-button in templates; bindings and events follow Vue's normal syntax.

Run and build

Development server:

npm run dev

Then open http://localhost:5173/.

Production build:

npm run build

Output goes to ./dist.

Read more about using Smart UI for Vue.

Accessibility

The PowerButton 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.

Related Components

• Button
• SwitchButton

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.