Skip to main content

Button component

Level: beginner

Use the Button component to add buttons.

View the example of a configuration object that adds the button below.

Example of a configuration object that adds the button
{
"type": "crt.Button",
"clicked": {
/* Creatio lets you bind the sending of base or custom request to the button click event. */
"request": "crt.CreateRecordRequest"
},
"icon": "open-button-icon",
"caption": "Button",
"color": "primary",
"size": "medium",
"iconPosition": "left-icon",
"menuTitle": "Menu title" /*Added.*/,
"menuItems": [
{
"type": "crt.MenuItem",
"caption": "Menu item 1",
"clicked": {
/* Creatio lets you bind the sending of base or custom request to the button click event. */
"request": "crt.SetViewModelAttributeRequest",
"params": {
"attributeName": "CalendarViewMode",
"value": "day"
}
},
},
{...}
...
]
}
string type

Component type. crt.Button for the Button component.


object clicked

The request fires when a user clicks the button. Creatio lets you bind the sending of a base request or custom request handlers implemented in remote module to the button click event.


string icon

Icon to display next to the menu item caption.

Available values

Value

Example

actions-button-icon

add-button-icon

back-button-icon

bars-button-icon

calculator-button-icon

clip-button-icon

close-button-icon

delete-button-icon

disk-warn-button-icon

document-button-icon

document-new-button-icon

upload-button-icon

download-button-icon

edit-button-icon

email-button-icon

export-button-icon

export-data-button-icon

flag-button-icon

gear-button-icon

horn-button-icon

import-button-icon

import-data-button-icon

lock-button-icon

contact-lock-icon

message-warn-button-icon

more-button-icon

open-button-icon

pencil-button-icon

print-button-icon

process-button-icon

reload-button-icon

save-button-icon

settings-button-icon

social-button-icon

call-button-icon

folder-button-icon

person-button-icon

timeline-button-icon

facebook-button-icon

linkedin-button-icon

webforms-button-icon

webhooks-integration-button-icon

copy-icon

message-composer-checkmark

relationship-button-icon

date

date-time

box-icon

car-icon

contact-leads-icon

database-icon

employee-icon

filter-column-icon

filter-funnel-icon

money-icon

newspaper-icon

organizational-structure-icon

tag-icon

trolley-icon

work-icon

replace-squares-icon

sum-button-icon


string caption

Localizable button caption.


string color

Button style. Out of the box, "default."

Available values

Value

Example

primary

accent

warn

default


boolean disabled

Indicates whether the button is disabled. Out of the box, "false."

Available values

Value

Description

true

The button is disabled.

false

The button is enabled.


string size

Button size. Out of the box, "large."

Available values

Value

Example

small

medium

large


string iconPosition

Position of the icon relative to the button caption. Out of the box, "left-icon."

Available values

Value

Description

Example

only-text

Do not display the icon. Display only the button caption.

left-icon

Display the icon to the left of the button caption.

right-icon

Display the icon to the right of the button caption.

only-icon

Display only the icon. Do not display the button caption.


string menuTitle

Title of the menu picker.


array of objects menuItems

List of button menu items. Displayed at the bottom of the page after clicking the button. When the menuItems property is used the clicked button property is ignored. To add the button menu item, use the Menu item component.