Split button

Guidelines

Guidelines

Split buttons are button elements that allow users to either trigger an action with one click or select an action from a list of options. They consist of two parts: a button labeled with text and/or an icon on the left and a dropdown button labeled with an icon on the right. We typically use split buttons when a default action is available but more options need to be offered. Split buttons group similar or related actions.

1. Button
2. Dropdown button
3. Button icon
4. Button label
5. Dropdown button icon

All the variants, options and states of the ix button and the ix dropdown button components apply to the split button. We've listed additional or deviating specifications here.

Options

• Disabled: The disabled option can be applied to the complete component. There is no option to disable each part of the split button independently.
• Label: Set a label for the button component (left side). We typically use short labels that contain a verb.
• Placement: Define where the flyout appears which is triggered when the dropdown button is active. You can choose between different directions (top, bottom, left, right) and two options for alignment with the button (start, end). When there is not enough space for the chosen setting, the placement is corrected automatically.

1. Bottom-end placement
2. Bottom-start placement

• SplitIcon: We typically use a chevron icon on the dropdown button, but a custom icon can be set. A common alternative to the chevron is the "more-menu" icon.
• The options loading and type are not available for split buttons.

Behavior in context

• Interaction: When users press an option from the dropdown list, the action is triggered. Typically the label of the button on the left side stays static. Be aware that updating the left side with the last triggered action may lead to layout changes (e.g. button width) and requires updating the dropdown by adding the action that was removed from the button face.

States

Split buttons have five states: Default, hover, active, disabled and focused. States are applied to left and the right part of the split button independently except for the disabled state. The visual appearance and the behavior of the states is the same as the ix button and the ix dropdown button.

Dos and Don’ts

• Do use split buttons when there is a frequent or most-important action
• Don't use split buttons for unrelated actions
• Don't duplicate the default option in the dropdown

Related patterns

• Button
• Dropdown
• Select
• Split button

Development

Development

Examples

PreviewAngularReactVueJavaScript

With icon only

PreviewAngularReactVueJavaScript

API (ix-split-button)

Properties

Name

Description and specifications

closeBehavior

Since 2.3.0

Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.

Attribute:

close-behavior

Type:

"both" ｜ "inside" ｜ "outside" ｜ boolean

Default:

'both'

disabled

Disabled

Attribute:

disabled

Type:

boolean

Default:

false

ghost

Button invisible

Attribute:

ghost

Type:

boolean

Default:

false

icon

Button icon

Attribute:

icon

Type:

string

Default:

''

label

Button label

Attribute:

label

Type:

string ｜ undefined

outline

Button outline variant

Attribute:

outline

Type:

boolean

Default:

false

placement

Placement of the dropdown

Attribute:

placement

Type:

"bottom-end" ｜ "bottom-start" ｜ "left-end" ｜ "left-start" ｜ "right-end" ｜ "right-start" ｜ "top-end" ｜ "top-start"

Default:

'bottom-start'

splitIcon

Icon of the button on the right

Attribute:

split-icon

Type:

string

Default:

'context-menu'

variant

Color variant of button

Attribute:

variant

Type:

"danger" ｜ "primary" ｜ "secondary"

Default:

'primary'

Events

Name

Description and specifications

buttonClick

Button clicked

Detail:

MouseEvent

API (ix-split-button-item)

Properties

Name

Description and specifications

icon

Dropdown icon

Attribute:

icon

Type:

string ｜ undefined

label

Dropdown label

Attribute:

label

Type:

string ｜ undefined

Events

Name

Description and specifications

itemClick

Dropdown item clicked

Detail:

MouseEvent