UWC Components
  • Default
  • Material
  • Fluent

On this page

Button

Buttons represent actions that are available to the user.

uwc-button is a feature-rich button built on Lit. It matches PrimeNG's button API with support for variants, sizes, icons, badges, loading states, and full CSS custom property theming.

Import

All components

import '@uwc/components';

Selected component (Lit / Angular / Vue)

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

React

import { UwcButtonReact } from '@uwc/button/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-button label="Click me"></uwc-button>`;
  }
}

React

import { UwcButtonReact as UwcButton } from '@uwc/button/react';

export default function App() {
  return <UwcButton label="Click me" />;
}

Angular

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

@Component({
  selector: 'app-demo',
  standalone: true,
  template: `<uwc-button label="Click me"></uwc-button>`,
})
export class AppComponent {}

Vue

export default {
  template: `
    <uwc-button label="Click me"></uwc-button>
  `,
};

Basic Usage

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

@customElement('app-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button label="Primary"></uwc-button>
      <uwc-button label="Secondary" variant="secondary"></uwc-button>
      <uwc-button label="Success" variant="success"></uwc-button>
      <uwc-button label="Danger" variant="danger"></uwc-button>
      <uwc-button label="With Icon" icon="star-fill"></uwc-button>
      <uwc-button label="Rounded" rounded></uwc-button>
      <uwc-button label="Outlined" outline></uwc-button>
      <uwc-button icon="bell" icon-only aria-label="Notifications"></uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button label="Primary" />
      <uwc-button label="Secondary" variant="secondary" />
      <uwc-button label="Success" variant="success" />
      <uwc-button label="Danger" variant="danger" />
      <uwc-button label="With Icon" icon="star-fill" />
      <uwc-button label="Rounded" rounded />
      <uwc-button label="Outlined" outline />
      <uwc-button icon="bell" iconOnly aria-label="Notifications" />
    </>
  );
}

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

@Component({
  selector: 'app-demo',
  standalone: true,
  template: `
    <uwc-button label="Primary"></uwc-button>
    <uwc-button label="Secondary" variant="secondary"></uwc-button>
    <uwc-button label="Success" variant="success"></uwc-button>
    <uwc-button label="Danger" variant="danger"></uwc-button>
    <uwc-button label="With Icon" icon="star-fill"></uwc-button>
    <uwc-button label="Rounded" rounded></uwc-button>
    <uwc-button label="Outlined" outline></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications"></uwc-button>
  `,
})
export class AppComponent {}

export default {
  template: `
    <uwc-button label="Primary"></uwc-button>
    <uwc-button label="Secondary" variant="secondary"></uwc-button>
    <uwc-button label="Success" variant="success"></uwc-button>
    <uwc-button label="Danger" variant="danger"></uwc-button>
    <uwc-button label="With Icon" icon="star-fill"></uwc-button>
    <uwc-button label="Rounded" rounded></uwc-button>
    <uwc-button label="Outlined" outline></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications"></uwc-button>
  `,
};

Basic

Use the label attribute or default slot for button text.

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

@customElement('button-basic-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button label="Primary"></uwc-button>
      <uwc-button label="Secondary" variant="secondary"></uwc-button>
      <uwc-button label="Success" variant="success"></uwc-button>
      <uwc-button label="Info" variant="info"></uwc-button>
      <uwc-button label="Warning" variant="warning"></uwc-button>
      <uwc-button label="Help" variant="help"></uwc-button>
      <uwc-button label="Danger" variant="danger"></uwc-button>
      <uwc-button label="Contrast" variant="contrast"></uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button label="Primary" />
      <uwc-button label="Secondary" variant="secondary" />
      <uwc-button label="Success" variant="success" />
      <uwc-button label="Info" variant="info" />
      <uwc-button label="Warning" variant="warning" />
      <uwc-button label="Help" variant="help" />
      <uwc-button label="Danger" variant="danger" />
      <uwc-button label="Contrast" variant="contrast" />
    </>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button label="Primary"></uwc-button>
    <uwc-button label="Secondary" variant="secondary"></uwc-button>
    <uwc-button label="Success" variant="success"></uwc-button>
    <uwc-button label="Info" variant="info"></uwc-button>
    <uwc-button label="Warning" variant="warning"></uwc-button>
    <uwc-button label="Help" variant="help"></uwc-button>
    <uwc-button label="Danger" variant="danger"></uwc-button>
    <uwc-button label="Contrast" variant="contrast"></uwc-button>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-button label="Primary"></uwc-button>
    <uwc-button label="Secondary" variant="secondary"></uwc-button>
    <uwc-button label="Success" variant="success"></uwc-button>
    <uwc-button label="Info" variant="info"></uwc-button>
    <uwc-button label="Warning" variant="warning"></uwc-button>
    <uwc-button label="Help" variant="help"></uwc-button>
    <uwc-button label="Danger" variant="danger"></uwc-button>
    <uwc-button label="Contrast" variant="contrast"></uwc-button>
  `
};

Sizes

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

@customElement('button-sizes-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button label="Small" size="small"></uwc-button>
      <uwc-button label="Medium" size="medium"></uwc-button>
      <uwc-button label="Large" size="large"></uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button label="Small" size="small" />
      <uwc-button label="Medium" size="medium" />
      <uwc-button label="Large" size="large" />
    </>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button label="Small" size="small"></uwc-button>
    <uwc-button label="Medium" size="medium"></uwc-button>
    <uwc-button label="Large" size="large"></uwc-button>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-button label="Small" size="small"></uwc-button>
    <uwc-button label="Medium" size="medium"></uwc-button>
    <uwc-button label="Large" size="large"></uwc-button>
  `
};

Raised

Add a shadow elevation with the raised attribute.

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

@customElement('button-raised-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button label="Primary" raised></uwc-button>
      <uwc-button label="Secondary" variant="secondary" raised></uwc-button>
      <uwc-button label="Success" variant="success" raised></uwc-button>
      <uwc-button label="Danger" variant="danger" raised></uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button label="Primary" raised />
      <uwc-button label="Secondary" variant="secondary" raised />
      <uwc-button label="Success" variant="success" raised />
      <uwc-button label="Danger" variant="danger" raised />
    </>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button label="Primary" raised></uwc-button>
    <uwc-button label="Secondary" variant="secondary" raised></uwc-button>
    <uwc-button label="Success" variant="success" raised></uwc-button>
    <uwc-button label="Danger" variant="danger" raised></uwc-button>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-button label="Primary" raised></uwc-button>
    <uwc-button label="Secondary" variant="secondary" raised></uwc-button>
    <uwc-button label="Success" variant="success" raised></uwc-button>
    <uwc-button label="Danger" variant="danger" raised></uwc-button>
  `
};

Rounded

Use rounded for a pill shape.

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

@customElement('button-rounded-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button label="Primary" rounded></uwc-button>
      <uwc-button label="Secondary" variant="secondary" rounded></uwc-button>
      <uwc-button label="Success" variant="success" rounded></uwc-button>
      <uwc-button label="Danger" variant="danger" rounded></uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button label="Primary" rounded />
      <uwc-button label="Secondary" variant="secondary" rounded />
      <uwc-button label="Success" variant="success" rounded />
      <uwc-button label="Danger" variant="danger" rounded />
    </>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button label="Primary" rounded></uwc-button>
    <uwc-button label="Secondary" variant="secondary" rounded></uwc-button>
    <uwc-button label="Success" variant="success" rounded></uwc-button>
    <uwc-button label="Danger" variant="danger" rounded></uwc-button>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-button label="Primary" rounded></uwc-button>
    <uwc-button label="Secondary" variant="secondary" rounded></uwc-button>
    <uwc-button label="Success" variant="success" rounded></uwc-button>
    <uwc-button label="Danger" variant="danger" rounded></uwc-button>
  `
};

Outlined

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

@customElement('button-outlined-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button label="Primary" outline></uwc-button>
      <uwc-button label="Secondary" variant="secondary" outline></uwc-button>
      <uwc-button label="Success" variant="success" outline></uwc-button>
      <uwc-button label="Danger" variant="danger" outline></uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button label="Primary" outline />
      <uwc-button label="Secondary" variant="secondary" outline />
      <uwc-button label="Success" variant="success" outline />
      <uwc-button label="Danger" variant="danger" outline />
    </>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button label="Primary" outline></uwc-button>
    <uwc-button label="Secondary" variant="secondary" outline></uwc-button>
    <uwc-button label="Success" variant="success" outline></uwc-button>
    <uwc-button label="Danger" variant="danger" outline></uwc-button>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-button label="Primary" outline></uwc-button>
    <uwc-button label="Secondary" variant="secondary" outline></uwc-button>
    <uwc-button label="Success" variant="success" outline></uwc-button>
    <uwc-button label="Danger" variant="danger" outline></uwc-button>
  `
};

Text (Ghost)

Transparent background, colored label.

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

@customElement('button-text-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button label="Primary" text></uwc-button>
      <uwc-button label="Secondary" variant="secondary" text></uwc-button>
      <uwc-button label="Success" variant="success" text></uwc-button>
      <uwc-button label="Danger" variant="danger" text></uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button label="Primary" text />
      <uwc-button label="Secondary" variant="secondary" text />
      <uwc-button label="Success" variant="success" text />
      <uwc-button label="Danger" variant="danger" text />
    </>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button label="Primary" text></uwc-button>
    <uwc-button label="Secondary" variant="secondary" text></uwc-button>
    <uwc-button label="Success" variant="success" text></uwc-button>
    <uwc-button label="Danger" variant="danger" text></uwc-button>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-button label="Primary" text></uwc-button>
    <uwc-button label="Secondary" variant="secondary" text></uwc-button>
    <uwc-button label="Success" variant="success" text></uwc-button>
    <uwc-button label="Danger" variant="danger" text></uwc-button>
  `
};

Link

Render as an anchor-styled button with underline.

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

@customElement('button-link-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button label="Primary" link></uwc-button>
      <uwc-button label="Secondary" variant="secondary" link></uwc-button>
      <uwc-button label="Success" variant="success" link></uwc-button>
      <uwc-button label="Danger" variant="danger" link></uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button label="Primary" link />
      <uwc-button label="Secondary" variant="secondary" link />
      <uwc-button label="Success" variant="success" link />
      <uwc-button label="Danger" variant="danger" link />
    </>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button label="Primary" link></uwc-button>
    <uwc-button label="Secondary" variant="secondary" link></uwc-button>
    <uwc-button label="Success" variant="success" link></uwc-button>
    <uwc-button label="Danger" variant="danger" link></uwc-button>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-button label="Primary" link></uwc-button>
    <uwc-button label="Secondary" variant="secondary" link></uwc-button>
    <uwc-button label="Success" variant="success" link></uwc-button>
    <uwc-button label="Danger" variant="danger" link></uwc-button>
  `
};

Icons

Use the icon attribute with icon-pos to control placement (left, right, top, bottom). 

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

@customElement('button-icons-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button label="Left Icon" icon="arrow-left" icon-pos="left"></uwc-button>
      <uwc-button label="Right Icon" icon="arrow-right" icon-pos="right"></uwc-button>
      <uwc-button label="Top Icon" icon="upload" icon-pos="top"></uwc-button>
      <uwc-button label="Bottom Icon" icon="download" icon-pos="bottom"></uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button label="Left Icon" icon="arrow-left" icon-pos="left" />
      <uwc-button label="Right Icon" icon="arrow-right" icon-pos="right" />
      <uwc-button label="Top Icon" icon="upload" icon-pos="top" />
      <uwc-button label="Bottom Icon" icon="download" icon-pos="bottom" />
    </>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button label="Left Icon" icon="arrow-left" icon-pos="left"></uwc-button>
    <uwc-button label="Right Icon" icon="arrow-right" icon-pos="right"></uwc-button>
    <uwc-button label="Top Icon" icon="upload" icon-pos="top"></uwc-button>
    <uwc-button label="Bottom Icon" icon="download" icon-pos="bottom"></uwc-button>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-button label="Left Icon" icon="arrow-left" icon-pos="left"></uwc-button>
    <uwc-button label="Right Icon" icon="arrow-right" icon-pos="right"></uwc-button>
    <uwc-button label="Top Icon" icon="upload" icon-pos="top"></uwc-button>
    <uwc-button label="Bottom Icon" icon="download" icon-pos="bottom"></uwc-button>
  `
};

Icon Only

Square icon-only buttons. Always add aria-label for accessibility.

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

@customElement('button-icon-only-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button icon="bell" icon-only aria-label="Notifications" size="small"></uwc-button>
      <uwc-button icon="bell" icon-only aria-label="Notifications"></uwc-button>
      <uwc-button icon="bell" icon-only aria-label="Notifications" size="large"></uwc-button>
      <uwc-button icon="bell" icon-only aria-label="Notifications" rounded></uwc-button>
      <uwc-button icon="bell" icon-only aria-label="Notifications" outline></uwc-button>
      <uwc-button icon="bell" icon-only aria-label="Notifications" text></uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button icon="bell" icon-only aria-label="Notifications" size="small" />
      <uwc-button icon="bell" icon-only aria-label="Notifications" />
      <uwc-button icon="bell" icon-only aria-label="Notifications" size="large" />
      <uwc-button icon="bell" icon-only aria-label="Notifications" rounded />
      <uwc-button icon="bell" icon-only aria-label="Notifications" outline />
      <uwc-button icon="bell" icon-only aria-label="Notifications" text />
    </>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button icon="bell" icon-only aria-label="Notifications" size="small"></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications"></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications" size="large"></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications" rounded></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications" outline></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications" text></uwc-button>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-button icon="bell" icon-only aria-label="Notifications" size="small"></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications"></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications" size="large"></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications" rounded></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications" outline></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications" text></uwc-button>
  `
};

Badge

Use the badge attribute to display a counter or status indicator.

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

@customElement('button-badge-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button label="Messages" icon="chat-left" badge="3"></uwc-button>
      <uwc-button label="Alerts" icon="bell" badge="99" badge-severity="warning"></uwc-button>
      <uwc-button label="Inbox" icon="envelope" badge="5" badge-severity="success" variant="secondary"></uwc-button>
      <uwc-button icon="bell" icon-only aria-label="Notifications" badge="7"></uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button label="Messages" icon="chat-left" badge="3" />
      <uwc-button label="Alerts" icon="bell" badge="99" badge-severity="warning" />
      <uwc-button label="Inbox" icon="envelope" badge="5" badge-severity="success" variant="secondary" />
      <uwc-button icon="bell" icon-only aria-label="Notifications" badge="7" />
    </>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button label="Messages" icon="chat-left" badge="3"></uwc-button>
    <uwc-button label="Alerts" icon="bell" badge="99" badge-severity="warning"></uwc-button>
    <uwc-button label="Inbox" icon="envelope" badge="5" badge-severity="success" variant="secondary"></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications" badge="7"></uwc-button>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-button label="Messages" icon="chat-left" badge="3"></uwc-button>
    <uwc-button label="Alerts" icon="bell" badge="99" badge-severity="warning"></uwc-button>
    <uwc-button label="Inbox" icon="envelope" badge="5" badge-severity="success" variant="secondary"></uwc-button>
    <uwc-button icon="bell" icon-only aria-label="Notifications" badge="7"></uwc-button>
  `
};

Fluid

fluid stretches the button to fill its container.

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

@customElement('button-fluid-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display: flex; flex-direction: column; gap: 0.5rem;">
        <uwc-button label="Fluid Primary" fluid></uwc-button>
        <uwc-button label="Fluid Secondary" variant="secondary" fluid></uwc-button>
        <uwc-button label="Fluid Outlined" variant="success" outline fluid></uwc-button>
      </div>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
      <uwc-button label="Fluid Primary" fluid />
      <uwc-button label="Fluid Secondary" variant="secondary" fluid />
      <uwc-button label="Fluid Outlined" variant="success" outline fluid />
    </div>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
      <uwc-button label="Fluid Primary" fluid></uwc-button>
      <uwc-button label="Fluid Secondary" variant="secondary" fluid></uwc-button>
      <uwc-button label="Fluid Outlined" variant="success" outline fluid></uwc-button>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
      <uwc-button label="Fluid Primary" fluid></uwc-button>
      <uwc-button label="Fluid Secondary" variant="secondary" fluid></uwc-button>
      <uwc-button label="Fluid Outlined" variant="success" outline fluid></uwc-button>
    </div>
  `
};

Loading

The loading attribute shows a spinner and disables interaction. Click a button to see it in action. 

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

@customElement('button-loading-demo')
export class AppDemo extends LitElement {
  @state() private _loading = false;

  _toggle() {
    this._loading = true;
    setTimeout(() => { this._loading = false; }, 2000);
  }

  render() {
    return html`
      <div style="display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center">
        <uwc-button label="Submit" ?loading=${this._loading} @uwc-click=${this._toggle}></uwc-button>
        <uwc-button label="Save" variant="success" ?loading=${this._loading} @uwc-click=${this._toggle}></uwc-button>
        <uwc-button label="Delete" variant="danger" ?loading=${this._loading} @uwc-click=${this._toggle}></uwc-button>
      </div>
    `;
  }
}

import React, { useState } from 'react';

export default function App() {
  const [loading, setLoading] = useState(false);
  const toggle = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  };
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
      <uwc-button label="Submit" loading={loading} onUwcClick={toggle} />
      <uwc-button label="Save" variant="success" loading={loading} onUwcClick={toggle} />
      <uwc-button label="Delete" variant="danger" loading={loading} onUwcClick={toggle} />
    </div>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-wrap:wrap;gap:0.5rem">
      <uwc-button label="Submit" [loading]="loading" (uwc-click)="toggle()"></uwc-button>
      <uwc-button label="Save" variant="success" [loading]="loading" (uwc-click)="toggle()"></uwc-button>
      <uwc-button label="Delete" variant="danger" [loading]="loading" (uwc-click)="toggle()"></uwc-button>
    </div>
  `
})
export class AppComponent {
  loading = false;
  toggle() {
    this.loading = true;
    setTimeout(() => (this.loading = false), 2000);
  }
}

export default {
  data() { return { loading: false }; },
  methods: {
    toggle() {
      this.loading = true;
      setTimeout(() => (this.loading = false), 2000);
    }
  },
  template: `
    <div style="display:flex;flex-wrap:wrap;gap:0.5rem">
      <uwc-button label="Submit" :loading="loading" @uwc-click="toggle"></uwc-button>
      <uwc-button label="Save" variant="success" :loading="loading" @uwc-click="toggle"></uwc-button>
      <uwc-button label="Delete" variant="danger" :loading="loading" @uwc-click="toggle"></uwc-button>
    </div>
  `
};

Disabled

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

@customElement('button-disabled-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button label="Primary" disabled></uwc-button>
      <uwc-button label="Secondary" variant="secondary" disabled></uwc-button>
      <uwc-button label="Outlined" outline disabled></uwc-button>
      <uwc-button label="Text" text disabled></uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button label="Primary" disabled />
      <uwc-button label="Secondary" variant="secondary" disabled />
      <uwc-button label="Outlined" outline disabled />
      <uwc-button label="Text" text disabled />
    </>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button label="Primary" disabled></uwc-button>
    <uwc-button label="Secondary" variant="secondary" disabled></uwc-button>
    <uwc-button label="Outlined" outline disabled></uwc-button>
    <uwc-button label="Text" text disabled></uwc-button>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-button label="Primary" disabled></uwc-button>
    <uwc-button label="Secondary" variant="secondary" disabled></uwc-button>
    <uwc-button label="Outlined" outline disabled></uwc-button>
    <uwc-button label="Text" text disabled></uwc-button>
  `
};

Button as Toggle

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

@customElement('button-toggle-demo')
export class AppDemo extends LitElement {
  @state() private _active = false;

  render() {
    return html`
      <uwc-button
        label=${this._active ? 'Active' : 'Inactive'}
        icon=${this._active ? 'check-circle' : 'circle'}
        variant=${this._active ? 'success' : 'secondary'}
        ?outline=${!this._active}
        @uwc-click=${() => { this._active = !this._active; }}
      ></uwc-button>
    `;
  }
}

import React, { useState } from 'react';

export default function App() {
  const [active, setActive] = useState(false);
  return (
    <uwc-button
      label={active ? 'Active' : 'Inactive'}
      icon={active ? 'check-circle' : 'circle'}
      variant={active ? 'success' : 'secondary'}
      outline={!active}
      onUwcClick={() => setActive(a => !a)}
    />
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button
      [label]="active ? 'Active' : 'Inactive'"
      [icon]="active ? 'check-circle' : 'circle'"
      [variant]="active ? 'success' : 'secondary'"
      [outline]="!active"
      (uwc-click)="active = !active">
    </uwc-button>
  `
})
export class AppComponent {
  active = false;
}

export default {
  data() { return { active: false }; },
  template: `
    <uwc-button
      :label="active ? 'Active' : 'Inactive'"
      :icon="active ? 'check-circle' : 'circle'"
      :variant="active ? 'success' : 'secondary'"
      :outline="!active"
      @uwc-click="active = !active"
    />
  `
};

Custom Styling

Override CSS custom properties to restyle without subclassing.

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

@customElement('button-custom-styling-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-button
        label="Custom Button"
        style="--uwc-btn-bg: linear-gradient(135deg, #667eea, #764ba2); --uwc-btn-radius: 2px; --uwc-btn-padding-x: 1.5rem; --uwc-btn-font-size: 0.9rem;">
      </uwc-button>
      <uwc-button
        label="Teal Raised"
        raised
        style="--uwc-btn-bg: #0d9488; --uwc-btn-radius: 8px;">
      </uwc-button>
    `;
  }
}

import React from 'react';

export default function App() {
  return (
    <>
      <uwc-button
        label="Custom Button"
        style={{
          '--uwc-btn-bg': 'linear-gradient(135deg, #667eea, #764ba2)',
          '--uwc-btn-radius': '2px',
          '--uwc-btn-padding-x': '1.5rem',
          '--uwc-btn-font-size': '0.9rem',
        }}
      />
      <uwc-button
        label="Teal Raised"
        raised
        style={{ '--uwc-btn-bg': '#0d9488', '--uwc-btn-radius': '8px' }}
      />
    </>
  );
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-button
      label="Custom Button"
      style="--uwc-btn-bg: linear-gradient(135deg, #667eea, #764ba2); --uwc-btn-radius: 2px;">
    </uwc-button>
    <uwc-button label="Teal Raised" raised style="--uwc-btn-bg: #0d9488;"></uwc-button>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-button
      label="Custom Button"
      style="--uwc-btn-bg: linear-gradient(135deg, #667eea, #764ba2); --uwc-btn-radius: 2px;"
    />
    <uwc-button label="Teal Raised" raised style="--uwc-btn-bg: #0d9488;" />
  `
};

Attributes

Name Type Default Description
label — — Text label (alternative to default slot).
variant — — Visual variant. Default: primary.
size — — small | medium | large. Default: medium.
icon — — uwc-icon name rendered inside the button.
icon-pos — — left | right | top | bottom. Default: left.
icon-only — — Square icon-only button; set aria-label for a11y.
type — — Native button type: button | submit | reset. Default: button.
raised — — Add elevation shadow.
rounded — — Fully rounded pill / circle shape.
outline — — Border-only style (no fill).
text — — Ghost / text-only style.
link — — Render as an anchor-styled button.
fluid — — Stretch to fill container width.
loading — — Show spinner and disable interaction.
loading-icon — — Custom icon name for loading state. Default: arrow-clockwise.
disabled — — Disable the button.
badge — — Badge text rendered on trailing edge.
badge-severity — — Badge color variant. Default: danger.
aria-label — — Accessible label (required for icon-only buttons).
tabindex — — Tab order.
autofocus — — Auto-focus on mount.

Properties

Name Type Default Description
styles CSSResultGroup [styles] —
label string | undefined — —
variant ButtonVariant 'primary' —
size ButtonSize 'medium' —
type ButtonType 'button' —
icon string | undefined — —
iconPos ButtonIconPos 'left' —
iconOnly boolean false —
loading boolean false —
loadingIcon string 'arrow-clockwise' —
raised boolean false —
rounded boolean false —
outline boolean false —
text boolean false —
link boolean false —
fluid boolean false —
disabled boolean false —
badge string | undefined — —
badgeSeverity string 'danger' —
ariaLabel string | null null —
tabindex number | undefined — —
autofocus boolean false —

Slots

Name Description
default Label content (overridden by label attribute).
prefix Content before the label (icon, avatar, etc.).
suffix Content after the label (icon, badge, etc.).

Events

Name Type Description
uwc-click CustomEvent Fired on click (not fired when disabled or loading).
uwc-focus CustomEvent Fired when the button gains focus.
uwc-blur CustomEvent Fired when the button loses focus.

CSS Custom Properties

Name Default Description
--uwc-btn-bg — Button background.
--uwc-btn-color — Button text/icon color.
--uwc-btn-border — Button border.
--uwc-btn-radius — Border radius.
--uwc-btn-shadow — Box shadow (raised).
--uwc-btn-font-size — Font size.
--uwc-btn-padding-x — Horizontal padding.
--uwc-btn-padding-y — Vertical padding.
--uwc-btn-gap — Gap between icon and label.
--uwc-btn-transition — Transition string.
--uwc-btn-badge-bg — Badge background color.
--uwc-btn-badge-color — Badge text color.

CSS Parts

Name Description
button The inner <button> element.
label The label span.
icon The icon wrapper.
badge The badge element.