Button

A component that is used for an action on a page.

Interface: IButton.

See the parameters of this component in storybook.

To set the button size, use ButtonSize which can have the following values: extraSmall, small, normal, medium.

Name	Description	Type	Example
label	The button text.	string	"Convert file"
size	The button size. The normal size is equal to 36x40 px on the Desktop and Touchcreen devices. Can be: extraSmall, small, normal, medium. The default value is extraSmall.	ButtonSize	normal
onClick	Sets a function which specifies an action initiated upon clicking the button.	func	() => {}
primary	Specifies if the button is primary or not. If the button is primary, it is colored blue.	boolean	true
scale	Specifies if the button width will be scaled to 100% or not.	boolean	true
isLoading	Specifies if the button will be displayed as a loader icon or not.	boolean	true
isDisabled	Specifies if the button is disabled or not. The disabled button is blurred.	boolean	false

Name	Description	Type	Example
withLoadingAfterClick	Specifies whether to set the isLoading state to the button after it is clicked until the action is completed.	boolean	true
disableWhileRequestRunning	Specifies whether to set the isDisabled state for the button when the withLoadingAfterClick parameter is set to true, and it is clicked either on the page or in the dialog box.	boolean	true

import {IButton, ButtonSize} from "@onlyoffice/docspace-plugin-sdk";

const buttonProps: IButton = {
    "label": "Convert file",
    "primary": true,
    "size": ButtonSize.normal,
    "scale": true,
    "isDisabled": false,
    "withLoadingAfterClick": true,
    "onClick": () => {},
};