Button Group
A container that groups related buttons together with consistent styling.
import { Component, signal } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import {
lucideArchive,
lucideArrowLeft,
lucideCalendarPlus,
lucideChevronRight,
lucideClock,
lucideEllipsis,
lucideListFilterPlus,
lucideMailCheck,
lucideTag,
lucideTrash,
} from '@ng-icons/lucide';
import { BrnMenuTrigger } from '@spartan-ng/brain/menu';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmButtonGroup } from '@spartan-ng/helm/button-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmMenuImports } from '@spartan-ng/helm/menu';
@Component({
selector: 'spartan-button-group-preview',
imports: [NgIcon, HlmIcon, HlmButton, HlmButtonGroup, BrnMenuTrigger, HlmMenuImports],
providers: [
provideIcons({
lucideArrowLeft,
lucideEllipsis,
lucideMailCheck,
lucideArchive,
lucideClock,
lucideCalendarPlus,
lucideListFilterPlus,
lucideTag,
lucideTrash,
lucideChevronRight,
}),
],
template: `
<div>
<div hlmButtonGroup>
<div hlmButtonGroup>
<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" align="end" [brnMenuTriggerFor]="menu">
<ng-icon name="lucideEllipsis" />
</button>
</div>
</div>
<ng-template #menu>
<hlm-menu class="w-56">
<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" [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" class="!text-destructive" />
<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
npx nx g @spartan-ng/cli:ui button-group
ng g @spartan-ng/cli:ui button-group
Usage
import {
HlmButtonGroup,
HlmButtonGroupSeparator,
HlmButtonGroupText
} from '@spartan-ng/helm/button-group';<div hlmButtonGroup>
<div hlmButtonGroup>
<button hlmBtn variant="outline">Button 1</button>
<button hlmBtn variant="outline">Button 2</button>
</div>
<hlm-button-group-separator />
<div hlmButtonGroup>
<span hlmButtonGroupText>Text</span>
</div>
</div>Accessibility
- The
HlmButtonGroupdirective has theroleattribute set togroup. - Use
Tabto navigate between the buttons in the group. - Use
aria-labeloraria-labelledbyto 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
ButtonGroupcomponent when you want to group buttons that perform an action. - Use the
ToggleGroupcomponent 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 { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideMinus, lucidePlus } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmButtonGroup } from '@spartan-ng/helm/button-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
@Component({
selector: 'spartan-button-group-orientation',
imports: [NgIcon, HlmIcon, HlmButton, HlmButtonGroup],
providers: [
provideIcons({
lucidePlus,
lucideMinus,
}),
],
template: `
<div hlmButtonGroup orientation="vertical" class="mb-4">
<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 { NgIcon, provideIcons } from '@ng-icons/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmButtonGroup } from '@spartan-ng/helm/button-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
@Component({
selector: 'spartan-button-group-size',
imports: [NgIcon, HlmIcon, HlmButton, HlmButtonGroup],
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">
<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 { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowLeft, lucideArrowRight } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmButtonGroup } from '@spartan-ng/helm/button-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
@Component({
selector: 'spartan-button-group-nested',
imports: [NgIcon, HlmIcon, HlmButton, HlmButtonGroup],
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">
<ng-icon hlm name="lucideArrowLeft" size="sm" />
</button>
<button hlmBtn variant="outline" size="icon-sm">
<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 { HlmButton } from '@spartan-ng/helm/button';
import { HlmButtonGroup, HlmButtonGroupSeparator } from '@spartan-ng/helm/button-group';
@Component({
selector: 'spartan-button-group-separator',
imports: [HlmButton, HlmButtonGroup, HlmButtonGroupSeparator],
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 { NgIcon, provideIcons } from '@ng-icons/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
@Component({
selector: 'spartan-button-group-split',
imports: [HlmIcon, NgIcon, HlmButton, 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.
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCopy } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmInput } from '@spartan-ng/helm/input';
@Component({
selector: 'spartan-button-group-with-text',
imports: [HlmIcon, NgIcon, HlmButton, HlmInput, 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 Input component with buttons.
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideSearch } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmButtonGroup } from '@spartan-ng/helm/button-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmInput } from '@spartan-ng/helm/input';
@Component({
selector: 'spartan-button-group-input',
imports: [HlmIcon, NgIcon, HlmButton, HlmButtonGroup, HlmInput],
providers: [
provideIcons({
lucideSearch,
}),
],
template: `
<div hlmButtonGroup>
<input hlmInput placeholder="Search..." class="z-10" />
<button hlmBtn variant="outline">
<ng-icon hlm name="lucideSearch" size="sm" />
</button>
</div>
`,
})
export class ButtonGroupInput {}Dropdown Menu
Create a split button group with a HlmDropdownMenu component .
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import {
lucideCheck,
lucideChevronDown,
lucideCopy,
lucideShare,
lucideTrash,
lucideTriangleAlert,
lucideUserRoundX,
lucideVolumeOff,
} from '@ng-icons/lucide';
import { BrnMenuTrigger } from '@spartan-ng/brain/menu';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmButtonGroup } from '@spartan-ng/helm/button-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmMenuImports } from '@spartan-ng/helm/menu';
@Component({
selector: 'spartan-button-group-dropdown-menu',
imports: [HlmIcon, NgIcon, HlmButton, HlmButtonGroup, BrnMenuTrigger, 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">
<ng-icon hlm name="lucideChevronDown" size="sm" />
</button>
</div>
<ng-template #menu>
<hlm-menu class="w-45 [--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 { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowRight } from '@ng-icons/lucide';
import { BrnSelectImports } from '@spartan-ng/brain/select';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmSelectImports } from '@spartan-ng/helm/select';
@Component({
selector: 'spartan-button-group-select',
imports: [HlmIcon, NgIcon, HlmInput, HlmButton, 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" class="z-10" />
</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',
},
];
}Popover
Use with a Popover component.
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBot, lucideChevronDown } from '@ng-icons/lucide';
import { BrnPopoverImports } from '@spartan-ng/brain/popover';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmButtonGroup } from '@spartan-ng/helm/button-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmPopoverImports } from '@spartan-ng/helm/popover';
@Component({
selector: 'spartan-button-group-popover',
imports: [HlmIcon, NgIcon, HlmInput, HlmButton, HlmButtonGroup, BrnPopoverImports, HlmPopoverImports],
providers: [
provideIcons({
lucideChevronDown,
lucideBot,
}),
],
template: `
<brn-popover sideOffset="5">
<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]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmButtonGroup
Selector: [hlmButtonGroup]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
| orientation | 'horizontal' | 'vertical' | horizontal | - |