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.

Parameters from Storybook
Name Description Type Example
The button text. string "Convert file"
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
Sets a function which specifies an action initiated upon clicking the button. func () => {}
Specifies if the button is primary or not. If the button is primary, it is colored blue.

Primary button

boolean true
Specifies if the button width will be scaled to 100% or not. boolean true
Specifies if the button will be displayed as a loader icon or not.

Loading button

boolean true
Specifies if the button is disabled or not. The disabled button is blurred.

Disabled button

boolean false
Extra parameters
Name Description Type Example
Specifies whether to set the isLoading state to the button after it is clicked until the action is completed. boolean true
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": () => {},