Run the CLI
Use the CLI to add the component to your project.
Button Group
A container that groups related buttons together with consistent styling.
Installation
Add the component files
Create the component directory structure and add the following files to your project.
Examples
default
import { Component } from '@angular/core';
import { ZardButtonComponent } from '@/shared/components/button/button.component';
import { ZardButtonGroupComponent } from '@/shared/components/button-group/button-group.component';
import { ZardDividerComponent } from '@/shared/components/divider';
import { ZardIconComponent } from '@/shared/components/icon';
import { ZardMenuImports } from '@/shared/components/menu/menu.imports';
@Component({
selector: 'z-demo-button-group-default',
imports: [ZardButtonGroupComponent, ZardButtonComponent, ZardIconComponent, ZardMenuImports, ZardDividerComponent],
template: `
<z-button-group>
<z-button-group class="hidden sm:flex">
<button type="button" z-button zType="outline" aria-label="Go Back">
<i z-icon zType="arrow-left"></i>
</button>
</z-button-group>
<z-button-group>
<button type="button" z-button zType="outline">Archive</button>
<button type="button" z-button zType="outline">Report</button>
</z-button-group>
<z-button-group>
<button type="button" z-button zType="outline">Snooze</button>
<button type="button" z-button zType="outline" z-menu [zMenuTriggerFor]="menu">
<i z-icon zType="ellipsis"></i>
<ng-template #menu>
<div z-menu-content class="w-48">
<button type="button" z-menu-item>
<i z-icon zType="check"></i>
Mark as Read
</button>
<button type="button" z-menu-item>
<i z-icon zType="archive"></i>
Archive
</button>
<z-divider zSpacing="sm" />
<button type="button" z-menu-item>
<i z-icon zType="clock"></i>
Snooze
</button>
<button type="button" z-menu-item>
<i z-icon zType="calendar-plus"></i>
Add to Calendar
</button>
<button type="button" z-menu-item>
<i z-icon zType="list-filter-plus"></i>
Add to List
</button>
<button
type="button"
z-menu-item
z-menu
[zMenuTriggerFor]="subMenu"
zPlacement="rightTop"
class="justify-between"
>
<div class="flex items-center">
<i z-icon zType="tag" class="mr-1"></i>
Label as
</div>
<i z-icon zType="chevron-right"></i>
<ng-template #subMenu>
<div z-menu-content class="w-48">
<button type="button" z-menu-item>Personal</button>
<button type="button" z-menu-item>Work</button>
<button type="button" z-menu-item>Other</button>
</div>
</ng-template>
</button>
<z-divider zSpacing="sm" />
<button type="button" z-menu-item class="text-red-500">
<i z-icon zType="trash"></i>
Trash
</button>
</div>
</ng-template>
</button>
</z-button-group>
</z-button-group>
`,
})
export class ZardDemoButtonGroupDefaultComponent {}
orientation
import { Component } from '@angular/core';
import { ZardButtonComponent } from '../../button/button.component';
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardButtonGroupComponent } from '../button-group.component';
@Component({
selector: 'z-demo-button-group-orientation',
imports: [ZardButtonGroupComponent, ZardButtonComponent, ZardIconComponent],
template: `
<z-button-group zOrientation="vertical">
<button z-button zType="outline"><i z-icon zType="plus"></i></button>
<button z-button zType="outline"><i z-icon zType="minus"></i></button>
</z-button-group>
`,
})
export class ZardDemoButtonGroupOrientationComponent {}
size
import { Component } from '@angular/core';
import { ZardButtonComponent } from '../../button/button.component';
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardButtonGroupComponent } from '../button-group.component';
@Component({
selector: 'z-demo-button-group-size',
imports: [ZardButtonGroupComponent, ZardButtonComponent, ZardIconComponent],
template: `
<z-button-group>
<button z-button zType="outline" zSize="sm">Small</button>
<button z-button zType="outline" zSize="sm">Group</button>
<button z-button zType="outline" zSize="sm"><i z-icon zType="plus"></i></button>
</z-button-group>
<z-button-group>
<button z-button zType="outline">Default</button>
<button z-button zType="outline">Group</button>
<button z-button zType="outline"><i z-icon zType="plus"></i></button>
</z-button-group>
<z-button-group>
<button z-button zType="outline" zSize="lg">Large</button>
<button z-button zType="outline" zSize="lg">Group</button>
<button z-button zType="outline" zSize="lg"><i z-icon zType="plus"></i></button>
</z-button-group>
`,
host: {
class: 'flex flex-col items-start gap-4',
},
})
export class ZardDemoButtonGroupSizeComponent {}
nested
import { Component } from '@angular/core';
import { ZardButtonComponent } from '../../button/button.component';
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardButtonGroupComponent } from '../button-group.component';
@Component({
selector: 'z-demo-button-group-nested',
imports: [ZardButtonGroupComponent, ZardButtonComponent, ZardIconComponent],
template: `
<z-button-group>
<z-button-group>
<button z-button zSize="sm" zType="outline">1</button>
<button z-button zSize="sm" zType="outline">2</button>
<button z-button zSize="sm" zType="outline">3</button>
<button z-button zSize="sm" zType="outline">4</button>
<button z-button zSize="sm" zType="outline">5</button>
<button z-button zSize="sm" zType="outline">6</button>
</z-button-group>
<z-button-group>
<button z-button zSize="sm" zType="outline"><i z-icon zType="arrow-left"></i></button>
<button z-button zSize="sm" zType="outline"><i z-icon zType="arrow-right"></i></button>
</z-button-group>
</z-button-group>
`,
})
export class ZardDemoButtonGroupNestedComponent {}
divider
import { Component } from '@angular/core';
import { ZardButtonComponent } from '../../button/button.component';
import { ZardButtonGroupComponent, ZardButtonGroupDividerComponent } from '../button-group.component';
@Component({
selector: 'z-demo-button-group-divider',
imports: [ZardButtonGroupComponent, ZardButtonComponent, ZardButtonGroupDividerComponent],
template: `
<z-button-group>
<button z-button zSize="sm" zType="secondary">Copy</button>
<z-button-group-divider />
<button z-button zSize="sm" zType="secondary">Paste</button>
</z-button-group>
`,
})
export class ZardDemoButtonGroupDividerComponent {}
input
import { Component } from '@angular/core';
import { ZardButtonComponent } from '../../button/button.component';
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardInputDirective } from '../../input/input.directive';
import { ZardButtonGroupComponent } from '../button-group.component';
@Component({
selector: 'z-demo-button-group-input',
imports: [ZardButtonGroupComponent, ZardButtonComponent, ZardIconComponent, ZardInputDirective],
template: `
<z-button-group>
<input z-input placeholder="Search..." />
<button z-button zType="outline"><i z-icon zType="search"></i></button>
</z-button-group>
`,
})
export class ZardDemoButtonGroupInputComponent {}
select
import { Component, signal } from '@angular/core';
import { ZardInputDirective } from '../../input/input.directive';
import { ZardSelectItemComponent } from '../../select/select-item.component';
import { ZardSelectComponent } from '../../select/select.component';
import { ZardButtonGroupComponent } from '../button-group.component';
@Component({
selector: 'z-demo-button-group-select',
imports: [ZardButtonGroupComponent, ZardSelectComponent, ZardSelectItemComponent, ZardInputDirective],
template: `
<z-button-group>
<z-select [(zValue)]="currency" class="w-fit">
@for (cur of CURRENCIES; track cur.code) {
<z-select-item [zValue]="cur.code">{{ cur.symbol }}</z-select-item>
}
</z-select>
<input z-input placeholder="10.00" type="number" step="0.1" />
</z-button-group>
`,
})
export class ZardDemoButtonGroupSelectComponent {
protected readonly CURRENCIES = [
{ symbol: '€', code: 'EUR' },
{ symbol: '$', code: 'USD' },
{ symbol: '£', code: 'GBP' },
{ symbol: '¥', code: 'JPY' },
];
protected readonly currency = signal(this.CURRENCIES[1].code);
}