UWC Components
  • Default
  • Material
  • Fluent

On this page

ToggleButton

A button that toggles between on and off states with configurable labels, icons, sizes, and a ripple effect.

uwc-togglebutton renders as a styled checkbox that looks like a button. It switches between on-label and off-label, supports optional icons, three sizes (small, medium, large), and fires uwc-change with { checked }.

Import

All components

import '@uwc/components';

Selected component (Lit / Angular / Vue)

import { UwcToggleButton } from '@uwc/components/togglebutton';
customElements.define('uwc-togglebutton', UwcToggleButton);

React

import { UwcToggleButton } from '@uwc/components/react';

Usage

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('app-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-togglebutton
        on-label="On"
        off-label="Off"
        @uwc-change=${(e) => console.log(e.detail.checked)}>
      </uwc-togglebutton>
    `;
  }
}

React

import React from 'react';
import { UwcToggleButton } from '@uwc/components/react';

export default function App() {
  return (
    <UwcToggleButton
      onLabel="On"
      offLabel="Off"
      onUwcChange={(e) => console.log(e.detail.checked)}
    />
  );
}

Angular

import { Component } from '@angular/core';
import '@uwc/togglebutton';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-togglebutton
      on-label="On"
      off-label="Off"
      (uwc-change)="onToggle($event)">
    </uwc-togglebutton>
  `,
})
export class AppComponent {
  onToggle(e: CustomEvent) { console.log(e.detail.checked); }
}

Vue

import '@uwc/togglebutton';

export default {
  template: `
    <uwc-togglebutton
      on-label="On"
      off-label="Off"
      @uwc-change="onToggle">
    </uwc-togglebutton>
  `,
  methods: {
    onToggle(e) { console.log(e.detail.checked); },
  },
};

Basic Usage

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('app-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1rem;flex-wrap:wrap;">
        <uwc-togglebutton off-label="Off" on-label="On"></uwc-togglebutton>
        <uwc-togglebutton off-label="Off" on-label="On" checked></uwc-togglebutton>
        <uwc-togglebutton off-label="Disabled" on-label="Disabled" disabled></uwc-togglebutton>
      </div>
    `;
  }
}

import React from 'react';
import { UwcToggleButton } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <UwcToggleButton offLabel="Off" onLabel="On" />
      <UwcToggleButton offLabel="Off" onLabel="On" checked />
      <UwcToggleButton offLabel="Disabled" onLabel="Disabled" disabled />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1rem;flex-wrap:wrap;">
      <uwc-togglebutton off-label="Off" on-label="On"></uwc-togglebutton>
      <uwc-togglebutton off-label="Off" on-label="On" checked></uwc-togglebutton>
      <uwc-togglebutton off-label="Disabled" on-label="Disabled" disabled></uwc-togglebutton>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1rem;flex-wrap:wrap;">
      <uwc-togglebutton off-label="Off" on-label="On"></uwc-togglebutton>
      <uwc-togglebutton off-label="Off" on-label="On" checked></uwc-togglebutton>
      <uwc-togglebutton off-label="Disabled" on-label="Disabled" disabled></uwc-togglebutton>
    </div>
  `
};

Basic

Toggle between on-label and off-label. The uwc-change event fires with { checked }. 

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('togglebtn-basic-demo')
export class AppDemo extends LitElement {
  static styles = css`
    :host { display: block; }
    p { margin: .75rem 0 0; font-size: .875rem; color: #374151; }
    strong { color: #6366f1; }
  `;

  @state() checked = false;

  render() {
    return html`
      <uwc-togglebutton
        off-label="Inactive"
        on-label="Active"
        ?checked=${this.checked}
        @uwc-change=${(e) => { this.checked = e.detail.checked; }}>
      </uwc-togglebutton>
      <p>State: <strong>${this.checked ? 'on' : 'off'}</strong></p>
    `;
  }
}

import React, { useState } from 'react';
import { UwcToggleButton } from '@uwc/components/react';

export default function App() {
  const [checked, setChecked] = useState(false);
  return (
    <>
      <UwcToggleButton
        offLabel="Inactive"
        onLabel="Active"
        checked={checked}
        onUwcChange={(e) => setChecked(e.detail.checked)}
      />
      <p style={{ marginTop: '.75rem', fontSize: '.875rem', color: '#374151' }}>
        State: <strong style={{ color: '#6366f1' }}>{checked ? 'on' : 'off'}</strong>
      </p>
    </>
  );
}

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-togglebutton
      off-label="Inactive"
      on-label="Active"
      [checked]="checked()"
      (uwc-change)="checked.set($event.detail.checked)">
    </uwc-togglebutton>
    <p style="margin:.75rem 0 0;font-size:.875rem;color:#374151">
      State: <strong style="color:#6366f1">{{ checked() ? 'on' : 'off' }}</strong>
    </p>
  `
})
export class AppComponent {
  readonly checked = signal(false);
}

export default {
  data() {
    return { checked: false };
  },
  template: `
    <uwc-togglebutton
      off-label="Inactive"
      on-label="Active"
      :checked="checked"
      @uwc-change="checked = $event.detail.checked">
    </uwc-togglebutton>
    <p style="margin:.75rem 0 0;font-size:.875rem;color:#374151">
      State: <strong style="color:#6366f1">{{ checked ? 'on' : 'off' }}</strong>
    </p>
  `
};

With icons

Set on-icon and off-icon with icon names to display an icon alongside the label. 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('togglebtn-icons-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1rem;flex-wrap:wrap;">
        <uwc-togglebutton
          off-label="Muted"
          on-label="Unmuted"
          off-icon="volume-mute-fill"
          on-icon="volume-up-fill">
        </uwc-togglebutton>
        <uwc-togglebutton
          off-label="Follow"
          on-label="Following"
          off-icon="bell"
          on-icon="bell-fill">
        </uwc-togglebutton>
        <uwc-togglebutton
          off-label="Like"
          on-label="Liked"
          off-icon="heart"
          on-icon="heart-fill">
        </uwc-togglebutton>
      </div>
    `;
  }
}

import React from 'react';
import { UwcToggleButton } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <UwcToggleButton offLabel="Muted"  onLabel="Unmuted"  offIcon="volume-mute-fill" onIcon="volume-up-fill" />
      <UwcToggleButton offLabel="Follow" onLabel="Following" offIcon="bell"            onIcon="bell-fill" />
      <UwcToggleButton offLabel="Like"   onLabel="Liked"    offIcon="heart"            onIcon="heart-fill" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1rem;flex-wrap:wrap;">
      <uwc-togglebutton off-label="Muted"  on-label="Unmuted"   off-icon="volume-mute-fill" on-icon="volume-up-fill"></uwc-togglebutton>
      <uwc-togglebutton off-label="Follow" on-label="Following" off-icon="bell"             on-icon="bell-fill"></uwc-togglebutton>
      <uwc-togglebutton off-label="Like"   on-label="Liked"     off-icon="heart"            on-icon="heart-fill"></uwc-togglebutton>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1rem;flex-wrap:wrap;">
      <uwc-togglebutton off-label="Muted"  on-label="Unmuted"   off-icon="volume-mute-fill" on-icon="volume-up-fill"></uwc-togglebutton>
      <uwc-togglebutton off-label="Follow" on-label="Following" off-icon="bell"             on-icon="bell-fill"></uwc-togglebutton>
      <uwc-togglebutton off-label="Like"   on-label="Liked"     off-icon="heart"            on-icon="heart-fill"></uwc-togglebutton>
    </div>
  `
};

Sizes

Use size to render small, medium (default), or large variants. 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('togglebtn-sizes-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
        <uwc-togglebutton size="small"  off-label="Small"  on-label="Small"></uwc-togglebutton>
        <uwc-togglebutton size="medium" off-label="Medium" on-label="Medium"></uwc-togglebutton>
        <uwc-togglebutton size="large"  off-label="Large"  on-label="Large"></uwc-togglebutton>
      </div>
    `;
  }
}

import React from 'react';
import { UwcToggleButton } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
      <UwcToggleButton size="small"  offLabel="Small"  onLabel="Small" />
      <UwcToggleButton size="medium" offLabel="Medium" onLabel="Medium" />
      <UwcToggleButton size="large"  offLabel="Large"  onLabel="Large" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
      <uwc-togglebutton size="small"  off-label="Small"  on-label="Small"></uwc-togglebutton>
      <uwc-togglebutton size="medium" off-label="Medium" on-label="Medium"></uwc-togglebutton>
      <uwc-togglebutton size="large"  off-label="Large"  on-label="Large"></uwc-togglebutton>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
      <uwc-togglebutton size="small"  off-label="Small"  on-label="Small"></uwc-togglebutton>
      <uwc-togglebutton size="medium" off-label="Medium" on-label="Medium"></uwc-togglebutton>
      <uwc-togglebutton size="large"  off-label="Large"  on-label="Large"></uwc-togglebutton>
    </div>
  `
};

Disabled

Set disabled to prevent interaction.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('togglebtn-disabled-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1rem;flex-wrap:wrap;">
        <uwc-togglebutton off-label="Off" on-label="On" disabled></uwc-togglebutton>
        <uwc-togglebutton off-label="Off" on-label="On" checked disabled></uwc-togglebutton>
      </div>
    `;
  }
}

import React from 'react';
import { UwcToggleButton } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <UwcToggleButton offLabel="Off" onLabel="On" disabled />
      <UwcToggleButton offLabel="Off" onLabel="On" checked disabled />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1rem;flex-wrap:wrap;">
      <uwc-togglebutton off-label="Off" on-label="On" disabled></uwc-togglebutton>
      <uwc-togglebutton off-label="Off" on-label="On" checked disabled></uwc-togglebutton>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1rem;flex-wrap:wrap;">
      <uwc-togglebutton off-label="Off" on-label="On" disabled></uwc-togglebutton>
      <uwc-togglebutton off-label="Off" on-label="On" checked disabled></uwc-togglebutton>
    </div>
  `
};

Attributes

Name Type Default Description
checked — — Whether the button is in the "on" state.
on-label — — Label shown when checked. Default: Yes.
off-label — — Label shown when unchecked. Default: No.
on-icon — — Icon name shown when checked.
off-icon — — Icon name shown when unchecked.
size — — small | medium | large. Default: medium.
outline — — Show outlined style when unchecked.
disabled — — Disable the toggle button.
name — — Name for form submission.

Properties

Name Type Default Description
styles CSSResultGroup [styles] —
checked boolean false —
onLabel string 'Yes' —
offLabel string 'No' —
onIcon string | undefined — —
offIcon string | undefined — —
name string | undefined — —
size ToggleButtonSize 'medium' —
outline boolean false —
disabled boolean false —

Events

Name Type Description
uwc-change CustomEvent Fired when checked state changes. Detail: { checked }.

CSS Custom Properties

Name Default Description
--uwc-togglebtn-bg — Background (off state).
--uwc-togglebtn-border — Border (off state).
--uwc-togglebtn-color — Text color (off state).
--uwc-togglebtn-radius — Border radius.
--uwc-togglebtn-active-bg — Background (on state). Default: primary.
--uwc-togglebtn-active-color — Text color (on state). Default: #fff.

CSS Parts

Name Description
button The visual button element.