SplitButton
Represents the KendoReact SplitButton component.
Definition
Package:@progress/kendo-react-buttons
Properties Interface:SplitButtonProps
Syntax:
const App = () => {
return (
<SplitButton text="Act">
<SplitButtonItem text="Item1" />
<SplitButtonItem text="Item2" />
<SplitButtonItem text="Item3" />
</SplitButton>
);
}Properties
accessKey?
string
Specifies the accessKey of the main button.
ariaLabel?
string
The accessible label of the component.
arrowButtonIcon?
string
Defines an icon that will be rendered inside the arrow button (see example).
'chevron-down'
arrowButtonSvgIcon?
SVGIcon
Defines a SVG icon that will be rendered inside the arrow button (see example).
chevronDownIcon
buttonClass?
string
Sets the className of the main button.
children?
ReactNode
Determines the children nodes.
className?
string
Sets the className of the SplitButton component.
dir?
string
Sets the direction of the component.
disabled?
boolean
Determines whether the component is disabled (see example).
endIcon?
ReactNode
Sets an SVG icon or custom element after the content of the SplitButton. For the custom component, we recommend using Phrasing content but there must be no Interactive content.
fillMode?
"solid" | "outline" | "flat" | "link"
Configures the fillMode of the SplitButton.
The available options are:
solidoutlineflatlink
undefined (theme-controlled)
icon?
string
Defines an icon that will be rendered next to the main button text (see example).
iconClass?
string
Defines an icon with a custom CSS class that will be rendered next to the main button text (see example).
id?
string
Sets the id property of the top div element of the component.
imageUrl?
string
Defines the location of an image that will be displayed next to the main button text (see example).
item?
null | ComponentType<{ item: any; itemIndex: number }>
A React functional or class component which is used for rendering items (see example). The default rendering includes an icon, an image, and text.
itemRender?
(li: ReactElement<HTMLLIElement, string | JSXElementConstructor<any>>, props: ButtonItemProps) => ReactNode | ComponentType<{ item: any; itemIndex: number }>
Fires when a dropdown list button item is about to be rendered. Use it to override the default appearance of the list items.
if item prop is not declared, itemRender behaves like item, for backward compatibility with versions before 4.2.0
items?
any[]
Specifies the list items (see example).
onButtonClick?
(event: SplitButtonClickEvent) => void
Fires when the main button is clicked (see example).
onClose?
(event: SplitButtonCloseEvent) => void
Fires when the popup which contains the items is closed (see example).
onOpen?
(event: SplitButtonOpenEvent) => void
Fires when the popup which contains the items is opened (see example).
Configures the popup (see example).
rounded?
"small" | "medium" | "large" | "full" | "none"
Configures the roundness of the SplitButton.
The available options are:
smallmediumlargefullnone
undefined (theme-controlled)
size?
"small" | "medium" | "large"
Configures the size of the SplitButton.
The available options are:
smallmediumlarge
undefined (theme-controlled)
startIcon?
ReactNode
Sets an SVG icon or custom element before the content of the SplitButton. For the custom component, we recommend using Phrasing content but there must be no Interactive content.
style?
CSSProperties
Sets additional CSS styles to the component.
svgIcon?
SVGIcon
Defines a SVG icon that will be rendered next to the main button text (see example).
tabIndex?
number
Specifies the tabIndex of the main button.
text?
string
Specifies the text of the main button (see example).
textField?
string
Configures the field that will be used for the text of the items. textField has to be used together with the items prop (see example).
themeColor?
"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse"
Configures the themeColor of the SplitButton.
The available options are:
baseprimarysecondarytertiaryinfosuccesswarningerrordarklightinverse
undefined (theme-controlled)
title?
string
The title of the component.
References
Represent the ref of the SplitButton component.
Accessors
element
null | HTMLButtonElement
The DOM element of main button.