General

Button

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

Displays a button or a link that looks like a button.

Usage#

app.component.ts

import { WdsButtonComponent } from '@wds/angular/button';

Examples#

Size#

Button xs

Button sm

Button

Button lg

Show code

button-size.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-button-size-demo',
  imports: [WdsButtonComponent],
  template: `
    <div class="flex flex-wrap items-center gap-2">
      <wds-button variant="outline" size="xs">Button xs</wds-button>
      <wds-button variant="outline" size="sm">Button sm</wds-button>
      <wds-button variant="outline">Button</wds-button>
      <wds-button variant="outline" size="lg">Button lg</wds-button>
    </div>
    <div class="flex flex-wrap items-center gap-2">
      <wds-button variant="outline" size="icon-xs" label="Send">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7" /><path d="M12 19V5" /></svg>
      </wds-button>
      <wds-button variant="outline" size="icon-sm" label="Send">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7" /><path d="M12 19V5" /></svg>
      </wds-button>
      <wds-button variant="outline" size="icon" label="Send">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7" /><path d="M12 19V5" /></svg>
      </wds-button>
      <wds-button variant="outline" size="icon-lg" label="Send">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7" /><path d="M12 19V5" /></svg>
      </wds-button>
    </div>
  `,
})
export class ButtonSizeDemo {}

Variants#

Default

Outline

Secondary

Ghost

Destructive

Link

Show code

button-variants.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-button-variants-demo',
  imports: [WdsButtonComponent],
  template: `
    <wds-button>Default</wds-button>
    <wds-button variant="outline">Outline</wds-button>
    <wds-button variant="secondary">Secondary</wds-button>
    <wds-button variant="ghost">Ghost</wds-button>
    <wds-button variant="destructive">Destructive</wds-button>
    <wds-button variant="link">Link</wds-button>
  `,
})
export class ButtonVariantsDemo {}

Disabled#

Disabled

Show code

button-disabled.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-button-disabled-demo',
  imports: [WdsButtonComponent],
  template: `
    <wds-button disabled>Disabled</wds-button>
    <wds-button variant="outline" disabled>Disabled</wds-button>
  `,
})
export class ButtonDisabledDemo {}

Icon#

An icon-only button needs a label: it becomes its accessible name.

Show code

button-icon.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-button-icon-demo',
  imports: [WdsButtonComponent],
  template: `
    <wds-button variant="outline" size="icon" label="Next">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
    </wds-button>
  `,
})
export class ButtonIconDemo {}

With icon#

New branch

Show code

button-with-icon.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-button-with-icon-demo',
  imports: [WdsButtonComponent],
  template: `
    <wds-button variant="outline" size="sm">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3v12" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></svg>
      New branch
    </wds-button>
  `,
})
export class ButtonWithIconDemo {}

Rounded#

Rounded

Square

Show code

button-rounded.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-button-rounded-demo',
  imports: [WdsButtonComponent],
  template: `
    <wds-button variant="outline" size="icon" shape="circle" label="Scroll to top">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7" /><path d="M12 19V5" /></svg>
    </wds-button>
    <wds-button shape="circle">Rounded</wds-button>
    <wds-button variant="secondary" shape="square">Square</wds-button>
  `,
})
export class ButtonRoundedDemo {}

Loading#

Sending

Show code

button-loading.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-button-loading-demo',
  imports: [WdsButtonComponent],
  template: `
    <wds-button variant="outline" size="sm" loading>Sending</wds-button>
  `,
})
export class ButtonLoadingDemo {}

Spinner#

Loading state after a click. This example has logic, so each framework has its own code.

Save

Show code

button-spinner.ts

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

@Component({
  selector: 'app-button-spinner-demo',
  imports: [WdsButtonComponent],
  template: `
    <wds-button [loading]="saving()" (click)="save()">
      {{ saving() ? 'Saving' : 'Save' }}
    </wds-button>
  `,
})
export class ButtonSpinnerDemo {
  protected readonly saving = signal(false);

  protected save(): void {
    this.saving.set(true);
    setTimeout(() => this.saving.set(false), 1500);
  }
}

As link#

Z href przycisk renderuje natywny <a>.

Open documentation

Link as button

Show code

button-as-link.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-button-as-link-demo',
  imports: [WdsButtonComponent],
  template: `
    <wds-button href="https://developer.mozilla.org/docs/Web/HTML/Element/a" target="_blank">Open documentation</wds-button>
    <wds-button variant="link" href="#">Link as button</wds-button>
  `,
})
export class ButtonAsLinkDemo {}

API References#

wds-button#

Button. Renders a native <button>, or with href a native <a> that looks like a button. aria-expanded, aria-haspopup, aria-pressed, aria-current, aria-keyshortcuts, aria-description and aria-label on the host are forwarded to the native element.

Attributes

Attribute	Type	Default	Description
variant	WdsButtonVariant	'default'	Visual variant.
size	WdsButtonSize	'default'	Size. `icon*` is a square, icon-only button (set `label` then).
shape	WdsButtonShape	'default'	Shape: default (radius md), `circle` or `square`.
type	WdsButtonType	'button'
disabled	boolean	false	Disables the button; clicks do not reach `click` listeners, as with a native disabled button.
loading	boolean	false	Loading state: spinner before the content, button inactive, `aria-busy`.
label	string \| undefined		Accessible label (`aria-label`), required for `icon*` sizes.
href	string \| undefined		URL: the button renders as a link.
target	string \| undefined

Slots

Slot	Description
(default)	Button content (text, `<svg>` icon).

CSS parts (::part)

Part	Description
button	The native `<button>` or `<a>`.

Accessibility#

wds-button renders a native <button>, or with href a native <a>, so it has the matching role and behavior.

The content is the accessible name. An icon-only button (size="icon*") needs a label: it becomes the aria-label.

disabled disables the native button; a disabled link loses its href and gets role="link" and aria-disabled="true". loading sets aria-busy="true" and makes the button inactive.

aria-expanded, aria-haspopup, aria-pressed, aria-current and aria-label set on wds-button are forwarded to the native element.

Keyboard support#

Key	Function
Tab	Moves focus to the button.
Enter	Activates the button or follows the link.
Space	Activates the button (links are activated only with `Enter`).

Usage#

Examples#

Size#

Variants#

Disabled#

Icon#

With icon#

Rounded#

Loading#

Spinner#

As link#

API References#

wds-button#

Attributes

Slots

CSS parts (::part)

Accessibility#

Screen reader#

Keyboard support#