UploadButtonProps

Premium

Updated on Feb 6, 2026

Represents the configuration options for the Upload button. Combines button styling props, upload behavior props, and event callbacks.

Name	Type	Default	Description
accept?	string		Sets the accept attribute of the file input element to specify allowed file types. Example: jsx <Upload accept=".jpg,.png" />
disabled?	boolean	false	Specifies if the Button is disabled (see example).
fillMode?	"link" | "flat" | "solid" | "outline" | "clear"	undefined (theme-controlled)	Configures the fillMode of the Button. See Button Appearance. tsx <Button fillMode="outline">Outline Button</Button>
icon?	string		Defines the name for an existing icon in a KendoReact theme (see example). The icon renders inside the Button by a span.k-icon element.
iconClass?	string		Defines a CSS class — or multiple classes separated by spaces — which apply to a span element inside the Button (see example). Allows you to use custom icons.
multiple?	boolean	true	Enables or disables the selection of multiple files. Defaults to true. jsx <Upload multiple={false} />
onRemoveAttachment?	(fileName: string) => void		Fires when the user removes an attachment by clicking the remove button. In controlled mode (when attachments prop is provided), use this to update your state. tsx <PromptBox attachments={attachments} uploadButtonConfig={{ onRemoveAttachment: (fileName) => { setAttachments(prev => prev.filter(file => file.name !== fileName)); } }} />
onSelectAttachments?	(event: PromptBoxSelectAttachmentsEvent) => void		Fires when the user selects files via the upload button. Provides both the newly selected files and the complete file state. tsx <PromptBox uploadButtonConfig={{ onSelectAttachments: (e) => { console.log('Selected:', e.selectedFiles); console.log('All files:', e.allFiles); } }} />
restrictions?	UploadFileRestrictions		Configures file restrictions such as allowed extensions and maximum file size. Example: jsx <Upload restrictions={{ allowedExtensions: ['.jpg', '.png'], maxFileSize: 1048576 }} />
rounded?	"small" | "none" | "medium" | "large" | "full"	undefined (theme-controlled)	Configures the roundness of the Button. See Button Appearance. The available options are: small medium large full none tsx <Button rounded="full">Rounded Button</Button>
size?	"small" | "medium" | "large"	undefined (theme-controlled)	Configures the size of the Button. See Button Appearance. tsx <Button size="large">Large Button</Button>
svgIcon?	SVGIcon		Defines the SVG icon that renders inside the Button component.
themeColor?	"base" | "error" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse"	undefined (theme-controlled)	Configures the themeColor of the Button. See Button Appearance. tsx <Button themeColor="primary">Primary Button</Button>