• It features a button with a label and an expand icon.
• The label specifies the default action and the expand icon opens a menu that list the available actions.
• The split button provides a quick and compact way for users to initiate a default action, or choose another action.

<fdp-split-menu-button
    [id]="splitbuttonID"
    [menu]="menuList"
    [compact]="true|false"
    [disabled]="true|false"// by default false
    [fdType]="standard|positive|medium|negative"
    [options]="emphasized|light|default"
    [buttonLabel]="first button"
    (buttonClicked)="onButtonClick()">
</fdp-split-menu-button>

ID of the split button.

Is button in compact mode or not.

To disable the split button.

Decides the type of split button. Applies to both first and second button/button with icon.

Decides the options for split button. Applies to both first and second button/button with icon.

Label of the first button.

Reference to menu which will be controlled by the split button.

Event triggered on click of button.

N/A

  <button class="fd-button">{{primaryButtonLabel}}</button>
  <button class="fd-button" [type]="menu" 
    [menuTriggerFor]="menu"
    (click)="onButtonClick()"></button>

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• buttonLabel can be supported with string binding and fdp-menu-item with normal i18n markers

<fdp-split-menu-button
    [id]="splitbuttonID"
    [menu]="menuList"
    [compact]="true|false"
    [fdType]="standard|positive|medium|negative"
    [options]="emphasized|light|default"
    i18n-buttonLabel="@@btnLabel"
    buttonLabel="first button"
    (buttonClicked)="onButtonClick()">
</fdp-split-menu-button>
        
<fdp-menu #menuList id="basic-menu" [xPosition]="'before'">
   <fdp-menu-item (itemSelect)="onItemSelectCozy('First Item')" i18n="@@first">First Item</fdp-menu-item>
   <fdp-menu-item (itemSelect)="onItemSelectCozy('Second Item')" i18n="@@second">Second Item</fdp-menu-item>
   <fdp-menu-item (itemSelect)="onItemSelectCozy('Third Item')" i18n="@@third">Third Item</fdp-menu-item>
</fdp-menu>

Redesign Required: No

Kevin:

I've been working on designing a new Menu system which I feel is more flexible (see Menu/Menu Trigger document). Using the new Menu system we would not need to incorporate the Menu and Popover into the Split Button component. Instead we could design the Spit Button as just a button element and add a "trigger" directive to it, which will associate it with an independent Menu component.

Update it that means we don't need to have right? [focusTrapped]="true|false" [triggers]="['']" [closeOnOutsideClick]="true|false"

query: Will a split button exist without menu option? because FRD says both are buttons in split.

<fdp-split-button [menu]="menu" (mainClick)="onMainClick()"></fdp-split-button>

Template:

<button (click)="onMainClick()"></button>
<button [menuTriggerFor]="menu"></button>

Updated the design as per review comments

Deepak:

1. Currently MenuItem does not expose value to outside. so how split-menu-button will be able to get text value of menuItem clicked, **because PrimayButton value needs to be changed based on MenuItem selected. **
2. currently menu does not have default Item functionality. So requirement of Split-menu-button that clicking on primary button should select default marked MenuItem is not in scope. By Default first MenuItem is getting clicked.