Overview
The Split Button component combines a primary action button with a dropdown menu of additional actions. It’s ideal for presenting a default action alongside related alternatives.
Import
import { MagarySplitButton } from 'ng-magary';
import { MenuItem } from 'ng-magary';
Basic Usage
import { Component } from '@angular/core';
import { MagarySplitButton, MenuItem } from 'ng-magary';
@Component({
selector: 'app-demo',
standalone: true,
imports: [MagarySplitButton],
template: `
<magary-split-button
label="Save"
[model]="saveOptions"
(onClick)="save()"
(itemClick)="onMenuItemClick($event)"
/>
`
})
export class DemoComponent {
saveOptions: MenuItem[] = [
{ label: 'Save as Draft', command: () => this.saveAsDraft() },
{ label: 'Save as Template', command: () => this.saveAsTemplate() },
{ label: 'Save and Close', command: () => this.saveAndClose() }
];
save() {
console.log('Default save action');
}
onMenuItemClick(event: { item: MenuItem; originalEvent: MouseEvent }) {
console.log('Menu item clicked:', event.item.label);
}
saveAsDraft() { console.log('Saving as draft...'); }
saveAsTemplate() { console.log('Saving as template...'); }
saveAndClose() { console.log('Saving and closing...'); }
}
Properties
Text label for the primary action button
icon
string
default:"undefined"
Lucide icon name to display on the primary button
Array of menu items for the dropdown menu. Each item can have a label, icon, command, and other properties.
When true, both the primary button and dropdown are disabled
severity
Severity
default:"'primary'"
Visual style variantOptions: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger'
Size of the buttonOptions: 'sm' | 'md' | 'lg'
Alignment of the dropdown menuOptions: 'start' | 'end'
Additional CSS classes to apply to the component
backgroundColor
string | null
default:"null"
Custom background color (CSS color value)
textColor
string | null
default:"null"
Custom text color (CSS color value)
Size of the icon in pixels
Custom ARIA label for the dropdown menu button
When true, the dropdown closes after selecting a menu item
Outputs
Emitted when the primary action button is clicked
Emitted when the dropdown toggle button is clicked
itemClick
EventEmitter<{ item: MenuItem; originalEvent: MouseEvent }>
Emitted when a menu item is clicked. Includes the selected item and original mouse event.
interface MenuItem {
label?: string; // Display text
icon?: string; // Lucide icon name
command?: (event: any) => void; // Action to execute
disabled?: boolean; // Disable the item
separator?: boolean; // Render as separator
styleClass?: string; // Custom CSS classes
[key: string]: any; // Additional properties
}
Examples
<magary-split-button
label="Save"
[model]="items"
(onClick)="save()"
/>
items: MenuItem[] = [
{ label: 'Update', command: () => this.update() },
{ label: 'Delete', command: () => this.delete() }
];
With Icons
items: MenuItem[] = [
{ label: 'New', icon: 'file-plus', command: () => this.create() },
{ label: 'Open', icon: 'folder-open', command: () => this.open() },
{ separator: true },
{ label: 'Recent', icon: 'clock', command: () => this.showRecent() }
];
<magary-split-button
label="File"
icon="file"
[model]="items"
severity="primary"
/>
Severity Variants
<magary-split-button
label="Save"
[model]="items"
severity="primary"
/>
Sizes
<magary-split-button
label="Save"
[model]="items"
size="sm"
/>
<magary-split-button
label="Actions"
[model]="items"
menuPosition="start"
/>
Custom Colors
<magary-split-button
label="Custom"
[model]="items"
backgroundColor="#6366f1"
textColor="#ffffff"
/>
Disabled State
<magary-split-button
label="Save"
[model]="items"
[disabled]="true"
/>
With Disabled Items
items: MenuItem[] = [
{ label: 'Edit', command: () => this.edit() },
{ label: 'Delete', disabled: true },
{ separator: true },
{ label: 'Archive', command: () => this.archive() }
];
<magary-split-button
label="Actions"
[model]="items"
[closeOnItemSelect]="false"
(itemClick)="handleItemClick($event)"
/>
Accessibility
The Split Button component includes comprehensive accessibility features:
- Keyboard Navigation: Full keyboard support for both button and menu
- ARIA Attributes: Proper ARIA roles and labels
- Focus Management: Smart focus handling between button and menu items
- Screen Reader Support: Descriptive labels and states
Keyboard Support
Dropdown Trigger
- Enter/Space: Open menu and focus first item
- ArrowDown: Open menu and focus first item
- ArrowUp: Open menu and focus last item
- Escape: Close menu and return focus to trigger
- ArrowDown: Focus next item
- ArrowUp: Focus previous item
- Home: Focus first item
- End: Focus last item
- Enter/Space: Select item and execute command
- Escape: Close menu and return focus to trigger
- Tab: Close menu and move focus to next element
Behavior
Auto-Close
The dropdown automatically closes when:
- A menu item is clicked (if
closeOnItemSelect is true)
- User clicks outside the component
- User presses the Escape key
- User presses Tab to move focus away
Focus Management
The component manages focus intelligently:
- Opening the menu focuses the first enabled item
- Closing with Escape returns focus to the dropdown trigger
- Arrow keys cycle through enabled items only
- Disabled items are skipped during keyboard navigation
Component Details
- Selector:
magary-split-button
- Source:
/home/daytona/workspace/source/projects/ng-magary/src/lib/Button/split-button/split-button.ts
- Standalone: Yes
- Change Detection: OnPush
Type Definitions
type Severity = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger';
type Size = 'sm' | 'md' | 'lg';
type MenuPosition = 'start' | 'end';
