Split Button Component
The Split Button component provides a combination of a default button action and a Dropdown Button, enabling users to quickly access additional options or actions in a compact interface.
Usage
To import and use the Split Button component in your application, use the following code snippet:
Demos
Explore the demos of the React Split Button component. Refer to this page.
Props
The following table outlines the props for the Split Button component:
| Name | Type | Default | Description |
|---|---|---|---|
| color | Color.Primary | Specifies the color style of the Split Button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error' and 'Info'. | |
| icon | node | - | Specifies an icon for the button, which can be defined using a CSS class name for custom styling or an SVG element for rendering. |
| iconPosition | 'Left' | Specifies the position of the icon relative to the Dropdown Button text. Options include placing the icon at the left, right, top, or bottom of the button content. | |
| itemTemplate | (item: ItemModel) => node | - | Provides a template for displaying content within the dropdown items. |
| items | ItemModel[] | [ ] | Specifies action items with its properties which will be rendered as Split Button secondary button popup. |
| lazyOpen | boolean | false | Specifies the popup element creation on open. |
| popupSettings | PopupSettings | {} | Specifies the popup settings including position, offset, collision handling, animation, and target element configuration. |
| size | Size.Medium | Specifies the size style of the Split Button. Options include 'Small', 'Medium' and 'Large'. | |
| trailingButtonProps | Partial<IDropDownButton & ButtonHTMLAttributes<HTMLButtonElement>> | - | Specifies additional properties to apply to the trailing dropdown button element. User-provided props will override internal default values. |
| variant | Variant.Filled | Specifies the variant style of the Split Button. Options include 'Outlined', 'Filled' and 'Standard'. |
Methods
The following table outlines the methods for the Split Button component:
| Name | Parameters | Returns | Description |
|---|---|---|---|
| toggle | - | void | To open/close Split Button popup based on current state of the Split Button. |
Events
The following table outlines the events for the Split Button component:
| Name | Type | Description |
|---|---|---|
| onClose | (event?: React.SyntheticEvent) => void | Event triggered while closing the Split Button popup. |
| onOpen | (event?: React.SyntheticEvent) => void | Event triggered while opening the Split Button popup. |
| onSelect | (event: ButtonSelectEvent) => void | Event triggered while selecting an action item in Split Button popup. |