Level: beginner
Button is a component that implements the Button type component in the front-end. Use the Button type component to implement user interaction with a Freedom UI page.
Properties
Button name. Required to bind the button to a handler, access the model attributes, etc.
Button visibility.
Button color. By default, default.
Available values default
primary
accent
warn
outline
displayType : ButtonDisplayType Button display type. By default, contained.
Available values Button property mapped to the aria-label button attribute. Uses the caption property value by default.
Localizable button caption.
Flag that locks the button. By default, false.
Available values false
The button is unlocked.
true
The button is locked.
Flag that displays the button clicked status. By default, false.
Available values false
The button is not clicked.
true
The button is clicked.
Property that disables the button animation on click. By default, false (animation enabled).
textTransform : TextTransform Display the style of the button caption.
Available values capitalize
Capitalize the first letter of every word in the caption.
lowercase
Do not capitalize the first letter of every word in the caption.
uppercase
Capitalize every letter of the caption.
none
Do not convert the caption.
inherit
Inherit the styles of the parent element.
clickMode : ButtonClickMode Sets the button mode. By default, default.
Available values Sets the button size. By default, large.
Available values none
default
extra-small
small
medium
large
extra-large
shape : BaseComponentShape Sets the button shape. By default, default.
Available values Events
Fires when a user clicks the button.
Styles
disabled - button - background Color of an inactive button.
Button border radius.
Sets the icon button size. By default, large.
Available values none
default
extra-small
small
medium
large
extra-large
Icon button
Icon button is an additional setting of a Button type component.
Properties
iconPosition : IconPositionEnum Position of the icon relative to the button caption. By default, only-text.
Available values only-text
left-icon
right-icon
only-icon
Localizable schema caption displayed when holding the pointer over the button.
Icon to display next to the button caption.
Available values actions-button-icon
add-button-icon
back-button-icon
bars-button-icon
calculator-button-icon
clip-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
checkmark-icon
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-icon
at-icon
show-structure-icon
show-merge-tag-icon
view-eye-icon
pen-icon
stop-button-icon
hide-merge-tag-icon
hide-structure-icon
chat-icon
consultation-icon
copilot-action-button-icon
copilot-rewrite-btn-icon
copilot-rewrite-friendly-icon
copilot-rewrite-formal-icon
copilot-rewrite-shorten-icon
copilot-rewrite-rephrase-icon
copilot-rewrite-extend-icon
reminding-icon
esn-notification
approvals
noteworthy-events
system-notifications
business-process
feed-sidebar
send-test-email-icon
Menu-item component
Menu-item is a component that lets you add additional actions to a button menu item. Use the Menu-item component for any interaction that performs an action on the current page.
Properties
Localizable caption of the button menu item.
Flag that manages the menu item visibility.
Flag that locks the menu item. By default, false.
items : CrtMenuItemViewElementConfig [ ] Index of button menu items. Displayed when you hold the pointer over the menu item that contains a submenu. The operation mechanism and properties of the button submenu and the button itself are identical.
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-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
checkmark-icon
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-icon
at-icon
show-structure-icon
show-merge-tag-icon
view-eye-icon
pen-icon
stop-button-icon
hide-merge-tag-icon
hide-structure-icon
chat-icon
consultation-icon
copilot-action-button-icon
copilot-rewrite-btn-icon
copilot-rewrite-friendly-icon
copilot-rewrite-formal-icon
copilot-rewrite-shorten-icon
copilot-rewrite-rephrase-icon
copilot-rewrite-extend-icon
reminding-icon
esn-notification
approvals
noteworthy-events
system-notifications
business-process
feed-sidebar
send-test-email-icon
Hex code of an icon color.
