Component

Split Button

Primary button with secondary actions dropdown. Full ARIA, keyboard navigation, loading spinner and 5 visual variants.

import { NeuSplitButtonComponent } from '@neural-ui/core/split-button';
import type { NeuSplitButtonAction } from '@neural-ui/core/split-button';

States

Variants

Sizes

import { NeuSplitButtonComponent, NeuSplitButtonAction } from '@neural-ui/core/split-button';

@Component({
  imports: [NeuSplitButtonComponent],
  template: `
    <neu-split-button
      label="Save"
      [actions]="actions"
      (primaryClick)="save($event)"
      (actionClick)="onAction($event)"
    />
  `
})
export class MyComponent {
  actions: NeuSplitButtonAction[] = [
    { id: 'draft', label: 'Save draft' },
    { id: 'copy',  label: 'Save copy' },
    { id: 'export', label: 'Export', divider: true },
    { id: 'delete', label: 'Delete', disabled: true },
  ];

  save(e: MouseEvent) { /* primary action */ }
  onAction(a: NeuSplitButtonAction) { console.log(a.id); }
}`