SplitButton

Usage

primaryClick runs the main action; actionClick identifies a secondary action by id. actions may include disabled entries or dividers. loading prevents duplicate activation while work is pending. The item Template replaces secondary action content; it does not replace the dropdown control or its keyboard behavior.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

<neu-split-button
  [actions]="actions()"
  [disabled]="false"
  [loading]="false"
  [size]="'md'"
  [variant]="'solid'"
  [tone]="'brand'"
  (primaryClick)="record('primaryClick')"
  (actionClick)="record('actionClick', $event.id)"
  [actionsAriaLabel]="'Save actions'"
  [label]="'Save'"
  [moreActionsAriaLabel]="'More actions'"
></neu-split-button>

import { signal } from '@angular/core';

export const actions = signal([
  {
    "id": "pdf",
    "label": "Export PDF"
  },
  {
    "id": "csv",
    "label": "Export CSV"
  },
  {
    "id": "archive",
    "label": "Archive",
    "disabled": true
  }
]);

State and events

primaryClick runs the main action; actionClick identifies a secondary action by id. actions may include disabled entries or dividers. loading prevents duplicate activation while work is pending. The item Template replaces secondary action content; it does not replace the dropdown control or its keyboard behavior.

Accessibility and keyboard

Tab reaches the primary action and dropdown trigger. Enter/Space opens the menu; arrows navigate and Escape closes it.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

import { NeuSplitButtonItemDirective } from '@neural-ui/core/split-button';

// Public declaration (reference only)
export declare class NeuSplitButtonItemDirective {
}

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

import { NeuSplitButtonItemDirective } from '@neural-ui/core/split-button';

// Public declaration (reference only)
readonly templateRef: TemplateRef<{
    $implicit: NeuSplitButtonAction;
}>;

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuButtonSize } from '@neural-ui/core/button';

// Public declaration (reference only)
export type NeuButtonSize = 'sm' | 'md' | 'lg';

import type { NeuButtonTone } from '@neural-ui/core/button';

// Public declaration (reference only)
export type NeuButtonTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';

import type { NeuButtonVariant } from '@neural-ui/core/button';

// Public declaration (reference only)
export type NeuButtonVariant = 'solid' | 'outline' | 'ghost';

import type { NeuIconKey } from '@neural-ui/core/foundation';

// Public declaration (reference only)
export type NeuIconKey = string;

import type { NeuIconKey } from '@neural-ui/core/foundation';

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

// Public declaration (reference only)
export interface NeuSplitButtonAction {
  disabled?: boolean;
  divider?: boolean;
  icon?: NeuIconKey;
  id: string;
  label: string;
}

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Related components

Use related components when your task requires a different interaction or a composed control.

• InlineEditor
• ToggleButtonGroup
• SpeedDial