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"
}
},
},
{...}
...
]
}

Common properties

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

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.


Optional properties

string color

Button style. By default, default.

Available values

primary

Primary. Blue button.

accent

Accent. Green button.

warn

Warning. Red button.

default

Auxiliary white button.


string size

Button size. By default, large.

Available values

small

medium

large


string iconPosition

Position of the icon relative to the button caption. By default, left-icon.

Available values

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.