Button Group

Group Buttons a series of buttons together on a single line, use to toggle content.

free

Default Button Group

Button group example below.

HTML

<ply-button-group color="transparent">
  <ply-group-button-item value="1">Test</ply-group-button-item>
  <ply-group-button-item value="2">Test 2</ply-group-button-item>
  <ply-group-button-item>Test 3</ply-group-button-item>
</ply-button-group>

TypeScript

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

// Install: npx ply-ui-cli add button-group
// Paths are relative to aliases.components (default: src/app/components)
import { ButtonGroupComponent } from './button-group/button-group.component';
import { ButtonGroupParent } from './button-group/button-group.token';
import { GroupButtonComponent } from './button-group/group-button/group-button.component';
import { ToggleButtonService, ToggleGroupButton } from './button-group/toggle-button.service';

@Component({
  selector: 'app-button-group-example',
  imports: [
    ButtonGroupComponent,
    GroupButtonComponent
  ],
  template: `...`
})
export class ButtonGroupExampleComponent {
  private toggleButton = inject(ToggleButtonService);
}

Install

bash

npx ply-ui-cli add button-group

Disabled Button

If need to disable certain button, add to the preferred <ply-group-button-item> the attribute disabled="true".

HTML

<ply-button-group color="transparent">
  <ply-group-button-item value="1">Test</ply-group-button-item>
  <ply-group-button-item value="2">Test 2</ply-group-button-item>
  <ply-group-button-item disabled="true"
    >Test 3</ply-group-button-item
  >
</ply-button-group>

TypeScript

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

// Install: npx ply-ui-cli add button-group
// Paths are relative to aliases.components (default: src/app/components)
import { ButtonGroupComponent } from './button-group/button-group.component';
import { ButtonGroupParent } from './button-group/button-group.token';
import { GroupButtonComponent } from './button-group/group-button/group-button.component';
import { ToggleButtonService, ToggleGroupButton } from './button-group/toggle-button.service';

@Component({
  selector: 'app-button-group-example',
  imports: [
    ButtonGroupComponent,
    GroupButtonComponent
  ],
  template: `...`
})
export class ButtonGroupExampleComponent {
  private toggleButton = inject(ToggleButtonService);
}

Install

bash

npx ply-ui-cli add button-group

Group Button with icon

Add ply-icon with preferred name inside <ply-group-button-item>

HTML

<div class="flex gap-4 items-center justify-center">
  <p>Section 1</p>
  <ply-divider class="mx-4 h-6" vertical="true"></ply-divider>
  <p>Section 2</p>
  <ply-divider class="mx-4 h-6" vertical="true"></ply-divider>
  <p>Section 3</p>
</div>

TypeScript

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

// Install: npx ply-ui-cli add button-group
// Paths are relative to aliases.components (default: src/app/components)
import { ButtonGroupComponent } from './button-group/button-group.component';
import { ButtonGroupParent } from './button-group/button-group.token';
import { GroupButtonComponent } from './button-group/group-button/group-button.component';
import { ToggleButtonService, ToggleGroupButton } from './button-group/toggle-button.service';

@Component({
  selector: 'app-button-group-example',
  imports: [
    ButtonGroupComponent,
    GroupButtonComponent
  ],
  template: `...`
})
export class ButtonGroupExampleComponent {
  private toggleButton = inject(ToggleButtonService);
}

Install

bash

npx ply-ui-cli add button-group

Sizes

Use the size property to change the height of the button group. Available sizes match our standard buttons: 'sm' | 'default' | 'lg' | 'xl' | 'xxl'.

HTML

<ply-button-group size="sm">
  <ply-group-button-item value="1">Small</ply-group-button-item>
  <ply-group-button-item value="2">Group</ply-group-button-item>
</ply-button-group>

TypeScript

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

// Install: npx ply-ui-cli add button-group
// Paths are relative to aliases.components (default: src/app/components)
import { ButtonGroupComponent } from './button-group/button-group.component';
import { ButtonGroupParent } from './button-group/button-group.token';
import { GroupButtonComponent } from './button-group/group-button/group-button.component';
import { ToggleButtonService, ToggleGroupButton } from './button-group/toggle-button.service';

@Component({
  selector: 'app-button-group-example',
  imports: [
    ButtonGroupComponent,
    GroupButtonComponent
  ],
  template: `...`
})
export class ButtonGroupExampleComponent {
  private toggleButton = inject(ToggleButtonService);
}

Install

bash

npx ply-ui-cli add button-group

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add button-group

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add button-group
// Paths are relative to aliases.components (default: src/app/components)
import { ButtonGroupComponent } from './button-group/button-group.component';
import { ButtonGroupParent } from './button-group/button-group.token';
import { GroupButtonComponent } from './button-group/group-button/group-button.component';
import { ToggleButtonService, ToggleGroupButton } from './button-group/toggle-button.service';

@Component({
  selector: 'app-your-component',
  imports: [
    ButtonGroupComponent,
    GroupButtonComponent
  ],
  template: `...`
})
export class YourComponent {
  private toggleButton = inject(ToggleButtonService);
}

API for button-group — generated from JSDoc in the library source.

API reference for button-group
API	Member	Type	Default	Description
`ToggleButtonService`	`setSelectedButton()`	`(value: ToggleGroupButton) => void`	—	Calls setSelectedButton.
`ButtonGroupParent`	`size`	`Signal<GroupButtonSize>`	—	—
`ToggleGroupButton`	`active`	`WritableSignal<boolean>`	—	—
`ply-button-group`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`ply-button-group`	`size`	`GroupButtonSize`	`'default'`	Shared size for all items in the group. Matches button / icon-button heights (`sm` = 28px, `default` = 36px, etc.).
`ply-button-group`	`(valueChange)`	`void`	—	Emits when valueChange occurs.
`ply-group-button-item`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`ply-group-button-item`	`icon`	`string \| undefined`	`undefined`	—
`ply-group-button-item`	`disabled`	`boolean`	`false`	—
`ply-group-button-item`	`value`	`unknown`	`undefined`	—
`ply-group-button-item`	`size`	`GroupButtonSize \| undefined`	`undefined`	Optional size override. When omitted, inherits from the parent `ply-button-group`.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).