Diggi Docs

SplitButton

The Split Button is used to combine multiple, interconnected actions within one single button. It thereby can help to reduce the total amount of action buttons and simplify the UI. There are two main areas defined in the Split Button: The left directly accessible section. It is reserved for one primary action and enables the user to perform an action quickly An opening flyout part, which can is triggered by clicking on the right side of the button, and indicated by a chevron icon. It can hold multiple secondary actions.

Verwendung

Split buttons are generally in use, whenever multiple, similar actions can be combined into one common component. It helps to reduce clutter by not having multiple buttons in the UI, serving a similar purpose. The usage of the Split Button is also allowed, even if a clear differentiation between one primary and several secondary actions is not given. Nonetheless there still must be a logical and functional connection between all options.

Eigenschaften

Name	Type	Default Value	Description
label	string	undefined	Primary Button Label
disabled	boolean	false	Disables the Button
icon	string	undefined	Icon to Display
action	string	undefined	Name of the action this button should be used for
title	string	undefined	Title to be displayed on hover
tabIndex	number	undefined	Index of sequential keyboard navigation
ariaHasPopup	string	undefined	Accessibility role. Used for popup context menu or sub-level menu.
ariaExpanded	string	undefined	Accessibility expanded. Used for toggle button.
ariaLabel	string	undefined	Accessibility label. Used if label doesn't exist.
ariaLabelledBy	string	undefined	Accessibility label. Used if label does exist.
options	IContextMeuLink	undefined	Secondary Options

Events

Name	Description
click

Verwendung

Eigenschaften

Events

Beispiele

Primary

Secondary

Tertiary

Integrated

Icon

Icon Secondary

Icon Tertiary

Icon Integrated