Button Group

A container that groups related buttons together with consistent styling.

import { Component, signal } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import {
	lucideArchive,
	lucideArrowLeft,
	lucideCalendarPlus,
	lucideChevronRight,
	lucideClock,
	lucideEllipsis,
	lucideListFilterPlus,
	lucideMailCheck,
	lucideTag,
	lucideTrash,
} from '@ng-icons/lucide';
import { BrnMenuImports } from '@spartan-ng/brain/menu';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmMenuImports } from '@spartan-ng/helm/menu';

@Component({
	selector: 'spartan-button-group-preview',
	imports: [HlmIconImports, HlmButtonImports, HlmButtonGroupImports, BrnMenuImports, HlmMenuImports],
	providers: [
		provideIcons({
			lucideArrowLeft,
			lucideEllipsis,
			lucideMailCheck,
			lucideArchive,
			lucideClock,
			lucideCalendarPlus,
			lucideListFilterPlus,
			lucideTag,
			lucideTrash,
			lucideChevronRight,
		}),
	],
	template: `
		<div>
			<div hlmButtonGroup>
				<div hlmButtonGroup class="hidden sm:flex">
					<button hlmBtn variant="outline" size="icon" aria-label="Go Back">
						<ng-icon name="lucideArrowLeft" />
					</button>
				</div>
				<div hlmButtonGroup>
					<button hlmBtn variant="outline">Archive</button>
					<button hlmBtn variant="outline">Report</button>
				</div>
				<div hlmButtonGroup>
					<button hlmBtn variant="outline">Snooze</button>
					<button hlmBtn variant="outline" aria-label="More Options" [brnMenuTriggerFor]="menu" align="end">
						<ng-icon name="lucideEllipsis" />
					</button>
				</div>
			</div>
			<ng-template #menu>
				<hlm-menu class="w-52">
					<hlm-menu-group>
						<button hlmMenuItem>
							<ng-icon hlm name="lucideMailCheck" size="sm" />
							<span>Mark as Read</span>
						</button>
						<button hlmMenuItem>
							<ng-icon hlm name="lucideArchive" size="sm" />
							<span>Archive</span>
						</button>
					</hlm-menu-group>
					<hlm-menu-separator />
					<hlm-menu-group>
						<button hlmMenuItem>
							<ng-icon hlm name="lucideClock" size="sm" />
							<span>Snooze</span>
						</button>
						<button hlmMenuItem>
							<ng-icon hlm name="lucideCalendarPlus" size="sm" />
							<span>Add to Calendar</span>
						</button>
						<button hlmMenuItem>
							<ng-icon hlm name="lucideCalendarPlus" size="sm" />
							<span>Add to List</span>
						</button>
						<button hlmMenuItem class="flex justify-between" align="start" side="right" [brnMenuTriggerFor]="submenu">
							<div class="flex items-center gap-2">
								<ng-icon hlm name="lucideTag" size="sm" />
								<span>Label as...</span>
							</div>
							<ng-icon hlm name="lucideChevronRight" size="sm" />
						</button>
					</hlm-menu-group>
					<hlm-menu-separator />
					<hlm-menu-group>
						<button hlmMenuItem variant="destructive" class="hover:bg-destructive/10 dark:hover:bg-destructive/40">
							<ng-icon hlm name="lucideTrash" size="sm" />
							<span>Delete</span>
						</button>
					</hlm-menu-group>
				</hlm-menu>
			</ng-template>
			<ng-template #submenu>
				<hlm-sub-menu class="w-40">
					<button hlmMenuItemRadio [checked]="label() === 'personal'" (click)="label.set('personal')">
						<hlm-menu-item-radio />
						<span>Personal</span>
					</button>
					<button hlmMenuItemRadio [checked]="label() === 'work'" (click)="label.set('work')">
						<hlm-menu-item-radio />
						<span>Work</span>
					</button>
					<button hlmMenuItemRadio [checked]="label() === 'other'" (click)="label.set('other')">
						<hlm-menu-item-radio />
						<span>Other</span>
					</button>
				</hlm-sub-menu>
			</ng-template>
		</div>
	`,
})
export class ButtonGroupPreview {
	public readonly label = signal('personal');
}

export const accessibilityCode = `
<div hlmButtonGroup aria-label="Button group">
	<button hlmBtn variant="outline">Button 1</button>
	<button hlmBtn variant="outline">Button 2</button>
</div>
`;

Installation

ng g @spartan-ng/cli:ui button-group

Usage

import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';

<div hlmButtonGroup>
  <button hlmBtn variant="outline">Button 1</button>
  <button hlmBtn variant="outline">Button 2</button>
</div>

Accessibility

The HlmButtonGroup directive has the role attribute set to group .
Use Tab to navigate between the buttons in the group.
Use aria-label or aria-labelledby to label the button group.

<div hlmButtonGroup aria-label="Button group">
	<button hlmBtn variant="outline">Button 1</button>
	<button hlmBtn variant="outline">Button 2</button>
</div>

ButtonGroup vs ToggleGroup

Use the ButtonGroup component when you want to group buttons that perform an action.
Use the ToggleGroup component when you want to group buttons that toggle a state.

Examples

Orientation

Set the orientation prop to change the button group layout.

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideMinus, lucidePlus } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-button-group-orientation',
	imports: [HlmIconImports, HlmButtonImports, HlmButtonGroupImports],
	providers: [provideIcons({ lucidePlus, lucideMinus })],
	template: `
		<div hlmButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
			<button hlmBtn variant="outline" size="icon">
				<ng-icon hlm name="lucidePlus" size="sm" />
			</button>
			<button hlmBtn variant="outline" size="icon">
				<ng-icon hlm name="lucideMinus" size="sm" />
			</button>
		</div>
	`,
})
export class ButtonGroupOrientation {}

Size

Control the size of buttons using the size prop on individual buttons.

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-button-group-size',
	imports: [HlmIconImports, HlmButtonImports, HlmButtonGroupImports],
	providers: [provideIcons({ lucidePlus })],
	template: `
		<div class="flex flex-col items-start gap-8">
			<div hlmButtonGroup>
				<button hlmBtn variant="outline" size="sm">Small</button>
				<button hlmBtn variant="outline" size="sm">Button</button>
				<button hlmBtn variant="outline" size="sm">Group</button>
				<button hlmBtn variant="outline" size="icon-sm">
					<ng-icon hlm name="lucidePlus" size="sm" />
				</button>
			</div>
			<div hlmButtonGroup>
				<button hlmBtn variant="outline">Default</button>
				<button hlmBtn variant="outline">Button</button>
				<button hlmBtn variant="outline">Group</button>
				<button hlmBtn variant="outline" size="icon">
					<ng-icon hlm name="lucidePlus" size="sm" />
				</button>
			</div>
			<div hlmButtonGroup>
				<button hlmBtn variant="outline" size="lg">Large</button>
				<button hlmBtn variant="outline" size="lg">Button</button>
				<button hlmBtn variant="outline" size="lg">Group</button>
				<button hlmBtn variant="outline" size="icon-lg">
					<ng-icon hlm name="lucidePlus" size="sm" />
				</button>
			</div>
		</div>
	`,
})
export class ButtonGroupSize {}

Nested

Nest HlmButtonGroup to create button groups with spacing.

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideArrowLeft, lucideArrowRight } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-button-group-nested',
	imports: [HlmIconImports, HlmButtonImports, HlmButtonGroupImports],
	providers: [provideIcons({ lucideArrowRight, lucideArrowLeft })],
	template: `
		<div hlmButtonGroup>
			<div hlmButtonGroup>
				<button hlmBtn variant="outline" size="sm">1</button>
				<button hlmBtn variant="outline" size="sm">2</button>
				<button hlmBtn variant="outline" size="sm">3</button>
				<button hlmBtn variant="outline" size="sm">4</button>
				<button hlmBtn variant="outline" size="sm">5</button>
			</div>
			<div hlmButtonGroup>
				<button hlmBtn variant="outline" size="icon-sm" aria-label="Previous">
					<ng-icon hlm name="lucideArrowLeft" size="sm" />
				</button>
				<button hlmBtn variant="outline" size="icon-sm" aria-label="Next">
					<ng-icon hlm name="lucideArrowRight" size="sm" />
				</button>
			</div>
		</div>
	`,
})
export class ButtonGroupNested {}

Separator

The HlmButtonGroupSeparator component visually divides buttons within a group.

Buttons with variant outline do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy.

import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';

@Component({
	selector: 'spartan-button-group-separator',
	imports: [HlmButtonImports, HlmButtonGroupImports],
	template: `
		<div hlmButtonGroup>
			<button hlmBtn variant="secondary" size="sm">Copy</button>
			<hlm-button-group-separator />
			<button hlmBtn variant="secondary" size="sm">Paste</button>
		</div>
	`,
})
export class ButtonGroupSeparator {}

Split

Create a split button group by adding two buttons separated by a HlmButtonGroupSeparator .

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-button-group-split',
	imports: [HlmIconImports, HlmButtonImports, HlmButtonGroupImports],
	providers: [provideIcons({ lucidePlus })],
	template: `
		<div hlmButtonGroup>
			<button hlmBtn variant="secondary">Button</button>
			<hlm-button-group-separator />
			<button hlmBtn variant="secondary" size="icon">
				<ng-icon hlm name="lucidePlus" size="sm" />
			</button>
		</div>
	`,
})
export class ButtonGroupSplit {}

With text

Add text to the button group using the HlmButtonGroupText component.

https://

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideCopy } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputImports } from '@spartan-ng/helm/input';

@Component({
	selector: 'spartan-button-group-with-text',
	imports: [HlmIconImports, HlmButtonImports, HlmInputImports, HlmButtonGroupImports],
	providers: [provideIcons({ lucideCopy })],
	template: `
		<div hlmButtonGroup>
			<span hlmButtonGroupText>https://</span>
			<input hlmInput placeholder="Website url" class="z-10" />
			<button hlmBtn variant="outline" size="icon">
				<ng-icon hlm name="lucideCopy" size="sm" />
			</button>
		</div>
	`,
})
export class ButtonGroupWithText {}

Input

Wrap an HlmInput component with buttons.

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideSearch } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputImports } from '@spartan-ng/helm/input';

@Component({
	selector: 'spartan-button-group-input',
	imports: [HlmIconImports, HlmButtonImports, HlmButtonGroupImports, HlmInputImports],
	providers: [provideIcons({ lucideSearch })],
	template: `
		<div hlmButtonGroup>
			<input hlmInput placeholder="Search..." />
			<button hlmBtn variant="outline">
				<ng-icon hlm name="lucideSearch" size="sm" />
			</button>
		</div>
	`,
})
export class ButtonGroupInput {}

Input Group

Wrap an HlmInputGroup component to create complex input layouts

import { Component, signal } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideAudioLines, lucidePlus } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';

@Component({
	selector: 'spartan-button-group-input-group',
	imports: [HlmIconImports, HlmButtonImports, HlmButtonGroupImports, HlmInputGroupImports, HlmTooltipImports],
	providers: [provideIcons({ lucidePlus, lucideAudioLines })],
	template: `
		<div hlmButtonGroup class="[--radius:9999rem]">
			<div hlmButtonGroup>
				<button hlmBtn variant="outline" size="icon">
					<ng-icon hlm name="lucidePlus" size="sm" />
				</button>
			</div>
			<div hlmButtonGroup>
				<div hlmInputGroup>
					<input
						hlmInputGroupInput
						[placeholder]="voiceEnabled() ? 'Record and send audio...' : 'Send a message...'"
						[disabled]="voiceEnabled()"
					/>
					<div hlmInputGroupAddon align="inline-end">
						<button
							hlmInputGroupButton
							hlmTooltipTrigger="Voice Mode"
							size="icon-xs"
							[attr.data-active]="voiceEnabled()"
							[attr.aria-pressed]="voiceEnabled()"
							class="data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100"
							(click)="voiceEnabled.set(!voiceEnabled())"
						>
							<ng-icon hlm name="lucideAudioLines" size="sm" />
						</button>
					</div>
				</div>
			</div>
		</div>
	`,
})
export class ButtonGroupInputGroup {
	public readonly voiceEnabled = signal(false);
}

Create a split button group with a HlmDropdownMenu component .

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import {
	lucideCheck,
	lucideChevronDown,
	lucideCopy,
	lucideShare,
	lucideTrash,
	lucideTriangleAlert,
	lucideUserRoundX,
	lucideVolumeOff,
} from '@ng-icons/lucide';
import { BrnMenuImports } from '@spartan-ng/brain/menu';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmMenuImports } from '@spartan-ng/helm/menu';

@Component({
	selector: 'spartan-button-group-dropdown-menu',
	imports: [HlmIconImports, HlmButtonImports, HlmButtonGroupImports, BrnMenuImports, HlmMenuImports],
	providers: [
		provideIcons({
			lucideChevronDown,
			lucideVolumeOff,
			lucideCheck,
			lucideTriangleAlert,
			lucideUserRoundX,
			lucideShare,
			lucideCopy,
			lucideTrash,
		}),
	],
	template: `
		<div hlmButtonGroup>
			<button hlmBtn variant="outline">Follow</button>
			<button hlmBtn variant="outline" size="icon" [brnMenuTriggerFor]="menu" align="end">
				<ng-icon hlm name="lucideChevronDown" size="sm" />
			</button>
		</div>
		<ng-template #menu>
			<hlm-menu class="w-[49] [--radius:1rem]">
				<hlm-menu-group>
					<button hlmMenuItem>
						<ng-icon hlm name="lucideVolumeOff" size="sm" />
						<span>Muted Conversation</span>
					</button>
					<button hlmMenuItem>
						<ng-icon hlm name="lucideCheck" size="sm" />
						<span>Mark as Read</span>
					</button>
					<button hlmMenuItem>
						<ng-icon hlm name="lucideTriangleAlert" size="sm" />
						<span>Report Conversation</span>
					</button>
					<button hlmMenuItem>
						<ng-icon hlm name="lucideUserRoundX" size="sm" />
						<span>Block User</span>
					</button>
					<button hlmMenuItem>
						<ng-icon hlm name="lucideShare" size="sm" />
						<span>Share Conversation</span>
					</button>
					<button hlmMenuItem>
						<ng-icon hlm name="lucideCopy" size="sm" />
						<span>Copy Conversation</span>
					</button>
				</hlm-menu-group>
				<hlm-menu-separator />
				<hlm-menu-group>
					<button hlmMenuItem variant="destructive" class="hover:bg-destructive/10 dark:hover:bg-destructive/40">
						<ng-icon hlm name="lucideTrash" size="sm" class="!text-destructive" />
						<span>Delete Conversation</span>
					</button>
				</hlm-menu-group>
			</hlm-menu>
		</ng-template>
	`,
})
export class ButtonGroupDropdownMenu {}

Select

Pair with a Select component.

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideArrowRight } from '@ng-icons/lucide';
import { BrnSelectImports } from '@spartan-ng/brain/select';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmSelectImports } from '@spartan-ng/helm/select';

@Component({
	selector: 'spartan-button-group-select',
	imports: [
		HlmIconImports,
		HlmInputImports,
		HlmButtonImports,
		BrnSelectImports,
		HlmSelectImports,
		HlmButtonGroupImports,
	],
	providers: [provideIcons({ lucideArrowRight })],
	template: `
		<div hlmButtonGroup>
			<div hlmButtonGroup class="[&>brn-select>div>hlm-select-trigger>button]:rounded-r-none">
				<brn-select class="inline-block" placeholder="Select an option" [value]="_currencies[0].value">
					<hlm-select-trigger>
						<hlm-select-value>
							<div *brnSelectValue="let value">
								<span>{{ value }}</span>
							</div>
						</hlm-select-value>
					</hlm-select-trigger>
					<hlm-select-content class="!min-w-40">
						@for (currency of _currencies; track currency.label) {
							<hlm-option [value]="currency.value">
								<span>
									{{ currency.value }}
								</span>
								<span class="text-muted-foreground">{{ currency.label }}</span>
							</hlm-option>
						}
					</hlm-select-content>
				</brn-select>
				<input hlmInput placeholder="10.00" />
			</div>
			<div hlmButtonGroup>
				<button hlmBtn variant="outline" size="icon">
					<ng-icon hlm name="lucideArrowRight" size="sm" />
				</button>
			</div>
		</div>
	`,
})
export class ButtonGroupSelect {
	protected readonly _currencies = [
		{
			value: '$',
			label: 'US Dollar',
		},
		{
			value: '€',
			label: 'Euro',
		},
		{
			value: '£',
			label: 'British Pound',
		},
	];
}

Use with a Popover component.

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideBot, lucideChevronDown } from '@ng-icons/lucide';
import { BrnPopoverImports } from '@spartan-ng/brain/popover';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmPopoverImports } from '@spartan-ng/helm/popover';

@Component({
	selector: 'spartan-button-group-popover',
	imports: [
		HlmIconImports,
		HlmInputImports,
		HlmButtonImports,
		HlmButtonGroupImports,
		BrnPopoverImports,
		HlmPopoverImports,
	],
	providers: [provideIcons({ lucideChevronDown, lucideBot })],
	template: `
		<brn-popover sideOffset="5" align="end">
			<div hlmButtonGroup>
				<button hlmBtn variant="outline">
					<ng-icon hlm name="lucideBot" size="sm" />
					Copilot
				</button>
				<button id="edit-profile" variant="outline" brnPopoverTrigger hlmBtn variant="outline" size="icon">
					<ng-icon hlm name="lucideChevronDown" size="sm" />
				</button>
				<div hlmPopoverContent class="rounded-xl p-0 text-sm" *brnPopoverContent="let ctx">
					<div class="border-input border-b px-4 py-3">
						<div class="text-sm font-medium">Agent Tasks</div>
					</div>
					<div class="p-4 text-sm">
						<textarea
							hlmInput
							placeholder="Describe your task in natural language."
							class="mb-4 min-h-16 resize-none"
						></textarea>
						<p class="mb-2 font-medium">Start a new task with Copilot</p>
						<p class="text-muted-foreground">
							Describe your task in natural language. Copilot will work in the background and open a pull request for
							your review.
						</p>
					</div>
				</div>
			</div>
		</brn-popover>
	`,
})
export class ButtonGroupPopover {}

Helm API

HlmButtonGroupSeparator

Selector: [hlmButtonGroupSeparator],hlm-button-group-separator

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmButtonGroupText

Selector: [hlmButtonGroupText],hlm-button-group-text

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmButtonGroup

Selector: [hlmButtonGroup],hlm-button-group

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-
orientation	'horizontal' \| 'vertical'	horizontal	-

Calendar

Button

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.

Button Group

Installation

Usage

Accessibility

ButtonGroup vs ToggleGroup

Examples

Orientation

Size

Nested

Separator

Split

With text

Input

Input Group

Dropdown Menu

Select

Popover

Helm API

HlmButtonGroupSeparator

Inputs

HlmButtonGroupText

Inputs

HlmButtonGroup

Inputs