Split Button

Components > User Interaction > Split Button

Use this component to...

Allow the user to press the main part of a button to perform a primary action, and select a secondary action item from a dropdown menu that displays when the button is pressed

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Split buttons have two parts: a main button on the left that performs a specified action when clicked, and a dropdown arrow button on the right that displays a dropdown menu when pressed.

Use split buttons when your users need to perform a primary action most of the time, but occasionally need the secondary actions offered in the dropdown menu.

Split button displaying its menu when the arrow button on the right is pressed

Text and icons

Split buttons can display a text label, an icon, or both.

Styling

Split buttons support the following styling:

Use secondary styling for most split buttons. The styling for secondary buttons is visually lighter to prevent the button from distracting the user’s eye from the data.
Use primary styling for a split button that performs the primary action in the view. The styling for primary buttons is visually heavy in order to draw attention to the button’s importance. There should be no more than one primary button in each view (or at most in each display block).

Usage

Split buttons can be used anywhere in a function view.

Development

Web component development

Component reference

rui-split-button

Module: rui-buttons - Package: @jkhy/responsive-ui-wc

Allows the user to trigger a primary action by pressing its main button on the left. Allows the user to access secondary actions by pressing its arrow dropdown menu on the right.

Name	Type	Default	Description
text	string	''	Text displayed in the button.
buttonStyle	string	'secondary'	Specifies the styling displayed for the button: One of “primary”, “secondary”, or “destructive” Use a value of “secondary” for most buttons. Use a value of “primary” for a button that performs the primary action in the view. There should be no more than one primary button in each view (or at most in each display block). Use a value of “destructive” if pressing the button triggers a significant, destructive action like deletion. This button style should be used sparingly.
buttonSize	string	'medium'	Specifies the relative size of the button: One of “medium” or “small” Use the default value of “medium” for most buttons. You can optionally use the “small” size for buttons in a toolbar if you’re looking for more compactness.
iconType	string	''	The name of the icon to display in an icon button. You can find a list of all enterprise icons here. The use of custom icons is also supported.
alignment	string	'left'	One of “left” or “right”. Describes which button edge the menu aligns to. Use a value of “right” if the button is towards the far right edge of the app and the dropdown menu is getting clipped on the right.
isDisabled	boolean	false	Specifies whether the button is disabled.
rui-click	event		Event fired when the user presses the main part of the button.

rui-button-menu-option

Module: rui-buttons - Package: @jkhy/responsive-ui-wc

Option in split menu

Name	Type	Default	Description
text	string	''	Text displayed in the split option
isDisabled	boolean	false	Specifies whether the split option is disabled.
route	string	''	If the split option links to a view within the app, assign the route for that view to this attribute. You must prefix the route with “/#” in Angular applications.
rui-menu-option-click	event		If the split option executes code, define a rui-menu-option-click event handler for it.

rui-button-menu-submenu

Module: rui-buttons - Package: @jkhy/responsive-ui-wc

Tiered submenu in split menu

Name	Type	Default	Description
text	string	''	Text displayed in the split submenu option
isDisabled	boolean	false	Specifies whether the split submenu option is disabled.

rui-button-menu-template

Module: rui-buttons - Package: @jkhy/responsive-ui-wc

Templated option in split menu

Name	Type	Default	Description
isDisabled	boolean	false	Specifies whether the split option is disabled.
route	string	''	If the split option links to a view within the app, assign the route for that view to this attribute. You must prefix the route with “/#” in Angular applications.
rui-menu-option-click	event		If the split option executes code, define a rui-menu-option-click event handler for it.

Name

Type

Default

Description

isDisabled

boolean

false

Specifies whether the split option is disabled.

route

string

If the split option links to a view within the app, assign the route for that view to this attribute.

You must prefix the route with “/#” in Angular applications.

rui-menu-option-click

event

If the split option executes code, define a rui-menu-option-click event handler for it.

rui-button-menu-separator

Module: rui-buttons - Package: @jkhy/responsive-ui-wc

Separator between groups of options in a split menu

No properties or events

Implementation

Begin by importing the rui-buttons module into your application.

Import the module

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-buttons/rui-buttons-imports';

Use the rui-split-button component to implement a split button. Specify the button’s text with the text property.

Define an rui-click event handler to perform an action when the main button on the left is pressed.

Nest an instance of rui-button-menu-option for each of the button’s dropdown menu options.

split button example

<rui-split-button text="Print" (rui-click)="print()">
    <rui-button-menu-option text="Export to PDF" (rui-click)="exportToPdf()"></rui-button-menu-option>
    <rui-button-menu-option text="Export to CSV" (rui-click)="exportToCsv()"></rui-button-menu-option>
</rui-split-button>

Bind isDisabled to a value of true to disable the button.

Split buttons in Responsive UI almost always display text as their content, but you can also display icon split buttons in limited cases. To display an icon as the button content, set the iconType property to one of the enterprise icon names. Use icon buttons sparingly, and only with standard icons that are very well understood by the user, such as print, edit, add-new, etc. You can find a list of all enterprise icons here.

Custom icons are also possible using the custom-icon slot. You can find more information on implementing custom icons on the icon component doc.

Icon-only split button example

<rui-split-button iconType="print" (rui-click)="print()">
    <rui-button-menu-option text="Export to PDF"></rui-button-menu-option>
    <rui-button-menu-option text="Export to CSV"></rui-button-menu-option>
</rui-split-button>

If you’re looking for more compactness for split buttons in a toolbar, you can set the buttonSize property to a value of “small”. This button size must only be used for buttons in a toolbar.

Small split button example

<rui-split-button text="Print" buttonSize="Small">

The options in the button dropdown menu typically display a simple text value. Nest instances of rui-button-menu-option within rui-split-button for this case. Specify the option text using the text property. You can (sparingly) use rui-button-menu-separator to separate groups of split options.

Split button with simple options

<rui-split-button text="Split Button" (rui-click)="buttonClick()">
    <rui-button-menu-option text="Show Popup Notification" (rui-click)="showPopupNotification = true"></rui-button-menu-option>
    <rui-button-menu-separator></rui-button-menu-separator>
    <rui-button-menu-option text="About Page" route="/#/About"></rui-button-menu-option>
</rui-split-button>

Sometimes it’s necessary to nest menu items within a split button’s menu. The rui-button-menu-submenu component helps you do this. Nest additional rui-button-menu-option elements within the submenu to create tiered flyout menus. Submenus can be disabled by binding isDisabled to true.

The flyout direction of the submenu follows the alignment of the rui-split-button.

By default the alignment is ’left’ and the submenus will fly out to the right.
If the alignment is set to ‘right’, the submenus will fly out to the left.
If the alignment property is not set, the component will attempt to determine the best alignment based on the proximity from the button to the right and left browser edges.

Split button with a submenu

<rui-dropdown-button text="Dropdown Button with Submenu">
    <rui-button-menu-option text="Responsive UI" route="/#/ResponsiveUI"></rui-button-menu-option>
    <rui-button-menu-submenu text="Resources">
        <rui-button-menu-option text="Patterns" route="/#/Patterns"></rui-button-menu-option>
        <rui-button-menu-option text="Icons" route="/#/Icons"></rui-button-menu-option>
    </rui-button-menu-submenu>
    <rui-button-menu-separator></rui-button-menu-separator>
    <rui-button-menu-option text="About Page" route="/#/About"></rui-button-menu-option>
    <rui-button-menu-option text="Show Popup Notification" (rui-click)="showPopupNotification = true"></rui-button-menu-option>
</rui-dropdown-button>

In some cases you may need to display a template with multiple data in each split option. Nest instances of rui-button-menu-template within rui-split-button for this case. Embed the template for each option within the rui-button-menu-template element. Flexbox CSS can be a handy way to provide layout for these templates. You can also use text formatting CSS classes to highlight certain segments of the template.

Don’t mix simple menu options with templated menu options in the same dropdown menu. Use either rui-button-menu-option or rui-button-menu-template, but not both in the same menu.

Split button with templated options: HTML

<rui-split-button text="Split Button with Templated Options" (rui-click)="buttonClick()">

    <rui-button-menu-template *ngFor="let account of accounts" (rui-click)="accountClick(account)">
        <div class="template-options">
            <div class="button-template-name">{{account.name}}</div>
            <div class="button-template-account-number rui-bright-text-label">{{account.number}}</div>
            <div class="button-template-account-desc">{{account.description}}</div>
        </div>
    </rui-button-menu-template>

</rui-split-button>

Split button with templated options: CSS

.template-options {
    display: flex;
    flex-flow: row nowrap;
    width: 450px;
}

.button-template-name {
    width: 35%;
}

.button-template-account-number {
    width: 20%;
}

.button-template-account-desc {
    width: 45%;
}

Angular wrapper development

Wrapper reference

jha-split-button

Module: JhaButtonsModule - Package: @jkhy/responsive-ui-angular

Allows the user to trigger a primary action with its large button on the left, and secondary actions from its arrow dropdown menu.

Name	Type	Default	Description
jhaText	string	''	Text displayed in the button.
jhaButtonStyle	string	'Secondary'	Specifies the styling displayed for the button: One of “Primary”, “Secondary”, or “Destructive” Use a value of “Secondary” for most buttons. Use a value of “Primary” for a button that performs the primary action in the view. There should be no more than one primary button in each view (or at most in each display block). Use a value of “Destructive” if pressing the button triggers a significant, destructive action like deletion. This button style should be used sparingly.
jhaButtonSize	string	'Medium'	Specifies the relative size of the button: One of “Medium” or “Small” Use the default value of “Medium” for most buttons. You can optionally use the “Small” size for buttons in a toolbar if you’re looking for more compactness.
jhaIconType	string	''	The name of the icon to display in an icon button. You can find a list of all enterprise icons here. The use of custom icons is also supported.
jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the button
jhaAlignment	string	'Left'	One of “Left” or “Right”. Describes which button edge the menu aligns to. Use a value of “Right” if the button is towards the far right edge of the app and the split menu is getting clipped on the right.
jhaIsDisabled	boolean	false	Specifies whether the button is disabled.
jhaClick	event		If the main part of the split button executes code, define a jhaClick event handler for it.
jhaRouterLink	string	''	If the main part of the split button links to a view within the app, this specifies the route for that view.
jhaExternalUrl	string	''	If the main part of the split button links to a URL outside of the app, this specifies the URL.
jhaExternalUrlInNewWindow	boolean	true	If the main part of the split button links to a URL outside of the app, leave this at its default value of true if that link should open in a new tab/window, otherwise bind this to false.
jhaWidth	string	'auto'	Specifies the width of the button. Leave at the default value of ‘auto’ unless you need to specify a specific pixel or percentage width. Use CSS notation appropriate for the CSS “width” attribute.

jha-button-menu-option

Module: JhaButtonsModule - Package: @jkhy/responsive-ui-angular

Option in dropdown menu

Name	Type	Default	Description
jhaText	string	''	Text displayed in the dropdown option
jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the dropdown option
jhaIsDisabled	boolean	false	Specifies whether the dropdown option is disabled.
jhaClick	event		If the dropdown option executes code, define a jhaClick event handler for it.
jhaRouterLink	string	''	If the dropdown option links to a view within the app, this specifies the route for that view.
jhaExternalUrl	string	''	If the dropdown option links to a URL outside of the app, this specifies the URL.
jhaExternalUrlInNewWindow	boolean	true	If the dropdown option links to a URL outside of the app, leave this at its default value of true if that link should open in a new tab/window, otherwise bind this to false.

jha-button-menu-submenu

Module: JhaButtonsModule - Package: @jkhy/responsive-ui-angular

Tiered submenu in dropdown menu

Name	Type	Default	Description
jhaText	string	''	Text displayed in the dropdown submenu option
jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the dropdown submenu option
jhaIsDisabled	boolean	false	Specifies whether the dropdown submenu option is disabled.

jha-button-menu-template

Module: JhaButtonsModule - Package: @jkhy/responsive-ui-angular

Templated option in dropdown menu

Name	Type	Default	Description
jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the dropdown option
jhaIsDisabled	boolean	false	Specifies whether the dropdown option is disabled.
jhaClick	event		If the dropdown option executes code, define a jhaClick event handler for it.
jhaRouterLink	string	''	If the dropdown option links to a view within the app, this specifies the route for that view.
jhaExternalUrl	string	''	If the dropdown option links to a URL outside of the app, this specifies the URL.
jhaExternalUrlInNewWindow	boolean	true	If the dropdown option links to a URL outside of the app, leave this at its default value of true if that link should open in a new tab/window, otherwise bind this to false.

jha-button-menu-separator

Module: JhaButtonsModule - Package: @jkhy/responsive-ui-angular

Separator between groups of options in a dropdown menu

No properties or events

Implementation

Begin by importing the JhaButtonsModule module into your application.

Import the module

// import into app.module
import { JhaButtonsModule } from '@jkhy/responsive-ui-angular/jha-buttons';

@NgModule({
    imports: [
        ...
        JhaButtonsModule,
        ...
    ]
})

export class AppModule(){}

Use the jha-split-button component to implement a split button. Specify the button’s text with the jhaText property.

A split button performs an action when the main button on the left is pressed. Use one of the following properties to specify the action performed when the main button is pressed.

If the main button executes code, define a jhaClick event handler for it.
If the main button links to a view within the app, specify the route for that view using the jhaRouterLink property.
If the main button links to a URL outside of the app, specify the URL using the jhaExternalUrl property. Leave the jhaExternalUrlInNewWindow property at its default value of true if that link should open in a new tab/window, otherwise bind this property to a value of false.

Nest an instance of jha-button-menu-option for each of the button’s split menu options.

split button example

<jha-split-button jhaText="Print" (jhaClick)="print()">
    <jha-button-menu-option jhaText="Export to PDF" (jhaClick)="exportToPdf()"></jha-button-menu-option>
    <jha-button-menu-option jhaText="Export to CSV" (jhaClick)="exportToCsv()"></jha-button-menu-option>
</jha-split-button>

Bind jhaIsDisabled to a value of true to disable the button.

Split buttons in Responsive UI almost always display text as their content, but you can also display icon split buttons in limited cases. To display an icon as the button content, set the jhaIconType property to one of the enterprise icon names. Use icon buttons sparingly, and only with standard icons that are very well understood by the user, such as Print, Edit, AddNew, etc. You can find a list of all enterprise icons here.

Custom icons are also possible using the custom-icon slot. You can find more information on implementing custom icons on the icon component doc.

Icon-only split button example

<jha-split-button jhaIconType="Print" (jhaClick)="print()">
    <jha-button-menu-option jhaText="Export to PDF"></jha-button-menu-option>
    <jha-button-menu-option jhaText="Export to CSV"></jha-button-menu-option>
</jha-split-button>

split buttons typically auto-size to fit their content, but in certain cases you may want to define a specific width for the button. You can use the jhaWidth property to specify a specific pixel or percentage width. If you do this, use CSS notation appropriate for the CSS “width” attribute.

Full-width split button example

<jha-split-button jhaText="Print" jhaWidth="100%">

If you’re looking for more compactness for split buttons in a toolbar, you can set the jhaButtonSize property to a value of “Small”. This button size must only be used for buttons in a toolbar.

Small split button example

<jha-split-button jhaText="Print" jhaButtonSize="Small">

The options in the button split menu typically display a simple text value. Nest instances of jha-button-menu-option within jha-split-button for this case. Specify the option text using the jhaText property. You can (sparingly) use jha-button-menu-separator to separate groups of split options.

Split button with simple options

<jha-split-button jhaText="Split Button" jhaTooltip="Split Button with Simple Options" (jhaClick)="buttonClick()">
    <jha-button-menu-option jhaText="Responsive UI" jhaExternalUrl="https://jharesponsiveui.z19.web.core.windows.net"></jha-button-menu-option>
    <jha-button-menu-separator></jha-button-menu-separator>
    <jha-button-menu-option jhaText="About Page" jhaRouterLink="/About"></jha-button-menu-option>
    <jha-button-menu-option jhaText="Show Popup Notification" (jhaClick)="showPopupNotification = true"></jha-button-menu-option>
</jha-split-button>

Sometimes it’s necessary to nest menu items within a split button’s menu. The jha-button-menu-submenu component helps you do this. Nest additional jha-button-menu-option elements within the submenu to create tiered flyout menus. Submenus can be disabled by binding jhaIsDisabled to true.

The flyout direction of the submenu follows the jhaAlignment of the jha-split-button.

By default the jhaAlignment is ‘Left’ and the submenus will fly out to the right.
If the alignment is set to ‘Right’, the submenus will fly out to the left.
If the alignment property is not set, the component will attempt to determine the best alignment based on the proximity from the button to the right and left browser edges.

split button with a submenu

<jha-split-button jhaText="Split Button with Submenu">
    <jha-button-menu-option jhaText="Responsive UI" jhaExternalUrl="https://jharesponsiveui.z19.web.core.windows.net"></jha-button-menu-option>
    <jha-button-menu-submenu jhaText="Resources">
        <jha-button-menu-option jhaText="Patterns" jhaRouterLink="/Patterns"></jha-button-menu-option>
        <jha-button-menu-option jhaText="Icons" jhaRouterLink="/Icons"></jha-button-menu-option>
    </jha-button-menu-submenu>
    <jha-button-menu-separator></jha-button-menu-separator>
    <jha-button-menu-option jhaText="About Page" jhaRouterLink="/About"></jha-button-menu-option>
    <jha-button-menu-option jhaText="Show Popup Notification" (jhaClick)="showPopupNotification = true"></jha-button-menu-option>
</jha-split-button>

In some cases you may need to display a template with multiple data in each split option. Nest instances of jha-button-menu-template within jha-split-button for this case. Embed the template for each option within the jha-button-menu-template element. Flexbox CSS can be a handy way to provide layout for these templates. You can also use text formatting CSS classes to highlight certain segments of the template.

Don’t mix simple menu options with templated menu options in the same dropdown menu. Use either jha-button-menu-option or jha-button-menu-template, but not both in the same menu.

split button with templated options: HTML

<jha-split-button jhaText="Split Button with Templated Options" (jhaClick)="buttonClick()">

    <jha-button-menu-template *ngFor="let account of accounts" (jhaClick)="accountClick(account)">
        <div class="template-options">
            <div class="button-template-name">{{account.name}}</div>
            <div class="button-template-account-number jha-bright-text-label">{{account.number}}</div>
            <div class="button-template-account-desc">{{account.description}}</div>
        </div>
    </jha-button-menu-template>

</jha-split-button>

split button with templated options: CSS

.template-options {
    display: flex;
    flex-flow: row nowrap;
    width: 450px;
}

.button-template-name {
    width: 35%;
}

.button-template-account-number {
    width: 20%;
}

.button-template-account-desc {
    width: 45%;
}

Component playground

Design

Figma design

Figma design info

You can find this component in the Components - Buttons page in the Figma UI Kit.

Dev Component	Design Component Name
Split button	RUI / Buttons / Split Button Available values for the Style property: Primary Secondary Disabled Switch on the IconOnly property if the split button only displays an icon.

Dev Component

Design Component Name

Split button

RUI / Buttons / Split Button

Available values for the Style property:

Primary
Secondary
Disabled

Switch on the IconOnly property if the split button only displays an icon.

Change the button text to an appropriate value. Resize the button to fit the text, but be careful that you’re resizing the outer component and not an inner layer within the component.

Note that hover effects on buttons are currently not included. We could technically include these for prototypes, but it would require you to set the text twice for every button: once for the normal state and again for the hover state. So for now, we’ve left out hover effects. You can still wire up click interactions on buttons though.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Buttons

Dev Component	Design Component Name
Split button - primary	JHA / Buttons / Split Button / Primary
Split button - secondary	JHA / Buttons / Split Button / Secondary
Split button - disabled	JHA / Buttons / Split Button / Disabled

Change the button text to an appropriate value. Resize the button to fit the text, but be careful that you’re resizing the outer component and not an inner layer within the component.

The disabled state for all buttons and the on/off states for toggling buttons are internal states within the development components, but we have provided separate design components for these states for each type of button.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Wed Sep 25 2024

Split Button

Overview

Text and icons

Styling

Usage

Development

Web component development

Component reference

rui-split-button

rui-button-menu-option

rui-button-menu-submenu

rui-button-menu-template

rui-button-menu-separator

Implementation

Displaying a tiered submenu in the split menu

Displaying templated options in the split menu

Angular wrapper development

Wrapper reference

jha-split-button

jha-button-menu-option

jha-button-menu-submenu

jha-button-menu-template

jha-button-menu-separator

Implementation

Displaying simple options in the split menu

Displaying a tiered submenu in the split menu

Displaying templated options in the split menu

Component playground

Design

Figma design

Adobe XD design

Split Button

Overview

Text and icons

Styling

Usage

Development

Web component development

Component reference

rui-split-button

rui-button-menu-option

rui-button-menu-submenu

rui-button-menu-template

rui-button-menu-separator

Implementation

Displaying simple options in the dropdown menu

Displaying a tiered submenu in the split menu

Displaying templated options in the split menu

Angular wrapper development

Wrapper reference

jha-split-button

jha-button-menu-option

jha-button-menu-submenu

jha-button-menu-template

jha-button-menu-separator

Implementation

Displaying simple options in the split menu

Displaying a tiered submenu in the split menu

Displaying templated options in the split menu

Component playground

Design

Figma design

Adobe XD design