General

Button Group

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

A container that groups related buttons together with consistent styling.

Usage#

app.component.ts

import { WDS_BUTTON_GROUP } from '@wds/angular/button-group';

Examples#

Default#

Nested groups sit next to each other with a gap; items inside a group share corners and borders.

Orientation#

orientation="vertical" stacks the buttons.

Show code

button-group-orientation.ts

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

@Component({
  selector: 'app-button-group-orientation-demo',
  imports: [WdsButtonGroupComponent, WdsButtonComponent],
  template: `
    <wds-button-group orientation="vertical" aria-label="Zoom">
      <wds-button variant="outline" size="icon" label="Zoom in">
        <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 12h14" /><path d="M12 5v14" /></svg>
      </wds-button>
      <wds-button variant="outline" size="icon" label="Zoom out">
        <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 12h14" /></svg>
      </wds-button>
    </wds-button-group>
  `,
})
export class ButtonGroupOrientationDemo {}

Size#

The group takes the size of its buttons.

Small

Button

Group

Default

Button

Group

Large

Button

Group

Show code

button-group-size.ts

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

@Component({
  selector: 'app-button-group-size-demo',
  imports: [WdsButtonGroupComponent, WdsButtonComponent],
  template: `
    <div class="flex flex-col items-center gap-4">
      <wds-button-group aria-label="Small buttons">
        <wds-button variant="outline" size="sm">Small</wds-button>
        <wds-button variant="outline" size="sm">Button</wds-button>
        <wds-button variant="outline" size="sm">Group</wds-button>
        <wds-button variant="outline" size="icon-sm" label="Add">
          <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 12h14" /><path d="M12 5v14" /></svg>
        </wds-button>
      </wds-button-group>
      <wds-button-group aria-label="Default buttons">
        <wds-button variant="outline">Default</wds-button>
        <wds-button variant="outline">Button</wds-button>
        <wds-button variant="outline">Group</wds-button>
        <wds-button variant="outline" size="icon" label="Add">
          <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 12h14" /><path d="M12 5v14" /></svg>
        </wds-button>
      </wds-button-group>
      <wds-button-group aria-label="Large buttons">
        <wds-button variant="outline" size="lg">Large</wds-button>
        <wds-button variant="outline" size="lg">Button</wds-button>
        <wds-button variant="outline" size="lg">Group</wds-button>
        <wds-button variant="outline" size="icon-lg" label="Add">
          <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 12h14" /><path d="M12 5v14" /></svg>
        </wds-button>
      </wds-button-group>
    </div>
  `,
})
export class ButtonGroupSizeDemo {}

Nested#

Show code

button-group-nested.ts

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

@Component({
  selector: 'app-button-group-nested-demo',
  imports: [WdsButtonGroupComponent, WdsButtonComponent],
  template: `
    <wds-button-group aria-label="Pagination">
      <wds-button-group>
        <wds-button variant="outline" size="sm">1</wds-button>
        <wds-button variant="outline" size="sm">2</wds-button>
        <wds-button variant="outline" size="sm">3</wds-button>
      </wds-button-group>
      <wds-button-group>
        <wds-button variant="outline" size="icon-sm" label="Previous">
          <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="m15 18-6-6 6-6" /></svg>
        </wds-button>
        <wds-button variant="outline" size="icon-sm" 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>
      </wds-button-group>
    </wds-button-group>
  `,
})
export class ButtonGroupNestedDemo {}

Separator#

wds-button-group-separator draws a line between buttons without a border, e.g. secondary.

Copy

Paste

Show code

button-group-separator.ts

import { Component } from '@angular/core';
import { WdsButtonGroupComponent, WdsButtonGroupSeparatorComponent } from '@wds/angular/button-group';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-button-group-separator-demo',
  imports: [WdsButtonGroupComponent, WdsButtonGroupSeparatorComponent, WdsButtonComponent],
  template: `
    <wds-button-group aria-label="Clipboard">
      <wds-button variant="secondary" size="sm">Copy</wds-button>
      <wds-button-group-separator></wds-button-group-separator>
      <wds-button variant="secondary" size="sm">Paste</wds-button>
    </wds-button-group>
  `,
})
export class ButtonGroupSeparatorDemo {}

Split#

Button

Show code

button-group-split.ts

import { Component } from '@angular/core';
import { WdsButtonGroupComponent, WdsButtonGroupSeparatorComponent } from '@wds/angular/button-group';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-button-group-split-demo',
  imports: [WdsButtonGroupComponent, WdsButtonGroupSeparatorComponent, WdsButtonComponent],
  template: `
    <wds-button-group aria-label="Split button">
      <wds-button variant="secondary">Button</wds-button>
      <wds-button-group-separator></wds-button-group-separator>
      <wds-button variant="secondary" size="icon" label="More">
        <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 12h14" /><path d="M12 5v14" /></svg>
      </wds-button>
    </wds-button-group>
  `,
})
export class ButtonGroupSplitDemo {}

Input#

Show code

button-group-input.ts

import { Component } from '@angular/core';
import { WdsButtonGroupComponent } from '@wds/angular/button-group';
import { WdsInputComponent } from '@wds/angular/input';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-button-group-input-demo',
  imports: [WdsButtonGroupComponent, WdsInputComponent, WdsButtonComponent],
  template: `
    <wds-button-group class="w-full max-w-xs" aria-label="Search">
      <wds-input placeholder="Search..." aria-label="Search"></wds-input>
      <wds-button variant="outline" size="icon" label="Search">
        <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="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg>
      </wds-button>
    </wds-button-group>
  `,
})
export class ButtonGroupInputDemo {}

Input group#

Show code

button-group-input-group.ts

import { Component, signal } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WDS_BUTTON_GROUP } from '@wds/angular/button-group';
import { WdsInputComponent } from '@wds/angular/input';
import { WDS_INPUT_GROUP } from '@wds/angular/input-group';

@Component({
  selector: 'app-button-group-input-group-demo',
  imports: [...WDS_BUTTON_GROUP, ...WDS_INPUT_GROUP, WdsButtonComponent, WdsInputComponent],
  template: `
    <wds-button-group class="w-sm max-w-full" aria-label="Message">
      <wds-button-group>
        <wds-button variant="outline" size="icon" label="Add attachment">
          <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 12h14" /><path d="M12 5v14" /></svg>
        </wds-button>
      </wds-button-group>
      <wds-button-group class="flex-1">
        <wds-input-group>
          <wds-input [placeholder]="voice() ? 'Recording...' : 'Send a message...'" [disabled]="voice()" aria-label="Message" />
          <wds-input-group-addon align="inline-end">
            <wds-button [variant]="voice() ? 'default' : 'ghost'" size="icon-xs" shape="circle" label="Voice mode" [attr.aria-pressed]="voice()" (click)="voice.set(!voice())">
              <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="M2 10v3" /><path d="M6 6v11" /><path d="M10 3v18" /><path d="M14 8v7" /><path d="M18 5v13" /><path d="M22 10v3" /></svg>
            </wds-button>
          </wds-input-group-addon>
        </wds-input-group>
      </wds-button-group>
    </wds-button-group>
  `,
})
export class ButtonGroupInputGroupDemo {
  protected readonly voice = signal(false);
}

A wds-dropdown trigger joins the group like a button.

Mute conversation

Mark as read

Block user

Show code

button-group-dropdown.ts

import { Component } from '@angular/core';
import { WdsButtonGroupComponent } from '@wds/angular/button-group';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsDropdownComponent, WdsDropdownItemComponent } from '@wds/angular/dropdown';

@Component({
  selector: 'app-button-group-dropdown-demo',
  imports: [WdsButtonGroupComponent, WdsButtonComponent, WdsDropdownComponent, WdsDropdownItemComponent],
  template: `
    <wds-button-group aria-label="Follow">
      <wds-button variant="outline">Follow</wds-button>
      <wds-dropdown align="end">
        <wds-button slot="trigger" variant="outline" size="icon" label="Follow options">
          <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 9 6 6 6-6" /></svg>
        </wds-button>
        <wds-dropdown-item value="mute">Mute conversation</wds-dropdown-item>
        <wds-dropdown-item value="read">Mark as read</wds-dropdown-item>
        <wds-dropdown-item value="block" variant="destructive">Block user</wds-dropdown-item>
      </wds-dropdown>
    </wds-button-group>
  `,
})
export class ButtonGroupDropdownDemo {}

Text#

wds-button-group-text looks like an item of the group, e.g. a prefix.

https://

.com

Show code

button-group-text.ts

import { Component } from '@angular/core';
import { WdsButtonGroupComponent, WdsButtonGroupTextComponent } from '@wds/angular/button-group';
import { WdsInputComponent } from '@wds/angular/input';

@Component({
  selector: 'app-button-group-text-demo',
  imports: [WdsButtonGroupComponent, WdsButtonGroupTextComponent, WdsInputComponent],
  template: `
    <wds-button-group class="w-full max-w-xs" aria-label="Website">
      <wds-button-group-text>https://</wds-button-group-text>
      <wds-input placeholder="example" aria-label="Domain"></wds-input>
      <wds-button-group-text>.com</wds-button-group-text>
    </wds-button-group>
  `,
})
export class ButtonGroupTextDemo {}

API References#

wds-button-group#

Buttons (and fields) joined into one element: shared corners and one border between neighbors. Nested groups sit next to each other with a gap.

Attributes

Attribute	Type	Default	Description
orientation	WdsButtonGroupOrientation	'horizontal'	Layout of the group: in a row or in a column.

Slots

Slot	Description
(default)	`wds-button`, `wds-input`, `wds-input-group`, `wds-dropdown`, `wds-button-group-text`, `wds-button-group-separator`, nested `wds-button-group`.

wds-button-group-separator#

A line between items of a group (e.g. for buttons without a border). Vertical by default (for a horizontal group); in a vertical group set orientation="horizontal".

Attributes

Attribute	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'vertical'	Direction of the line.

wds-button-group-text#

Text (or an icon) that looks like an item of the group, e.g. an https:// prefix before a field.

Slots

Slot	Description
(default)	Text, `<svg>` icon.

CSS parts (::part)

Part	Description
base	The box with the padding, border and background.

Accessibility#

wds-button-group has role="group": give it a name with aria-label that says what the buttons do together. A nested group is also a group; name it when the name adds information.

Buttons and fields in the group keep their own roles and names; an icon-only wds-button needs a label.

wds-button-group-separator has role="separator" with aria-orientation. wds-button-group-text is plain text.

Keyboard support#

The group has no keyboard interaction of its own: each button and field is a separate stop in the page tab sequence.

Usage#

Examples#

Default#

Orientation#

Size#

Nested#

Separator#

Split#

Input#

Input group#

Dropdown#

Text#

API References#

wds-button-group#

Attributes

Slots

wds-button-group-separator#

Attributes

wds-button-group-text#

Slots

CSS parts (::part)

Accessibility#

Screen reader#

Keyboard support#