File

packages/components/eui-split-button/eui-split-button.component.ts

Description

The EuiSplitButtonComponent is a wrapper for a button and a dropdown. It is used to create a split button with various styles and functionalities.

Basic Usage

<eui-split-button>
  <eui-button euiPrimary (click)="primaryAction()">
    Save
  </eui-button>
  <eui-dropdown>
    <eui-dropdown-item (click)="saveAndClose()">Save & Close</eui-dropdown-item>
    <eui-dropdown-item (click)="saveAsDraft()">Save as Draft</eui-dropdown-item>
  </eui-dropdown>
</eui-split-button>

Accessibility

• Ensure primary button has clear, action-oriented label
• Dropdown items should have descriptive text
• Keyboard navigation works for both button and dropdown

Notes

• Combines a primary action button with a dropdown menu of related actions
• Primary button executes the most common action
• Dropdown provides alternative or related actions