Level: beginner
Button is a component to execute a page action. Learn more: Button , Set up Button components (user documentation).
Properties
Button name. Required to bind the button to a handler, access the model attributes, etc.
Whether to display the button.
Button color. By default, "default."
Available values default
primary
accent
warn
outline
ButtonDisplayType displayType 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.
Whether to lock the button. By default, "false."
Available values false
The button is unlocked.
true
The button is locked.
Whether to display the button clicked status. By default, "false."
Available values false
The button is not clicked.
true
The button is clicked.
Whether to disable 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.
ButtonClickMode clickMode Set the button mode. By default, "default."
Available values Set the button size. By default, "large."
Available values none
default
extra-small
small
medium
large
extra-large
Set the button shape. By default, "default."
Available values Events
Whether to fire when a user clicks the button.
Styles
disabled - button - background Color of an inactive button.
Button border radius.
Set 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
IconPositionEnum iconPosition 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
rocket-icon
send-email-icon
confirm-scheduling-icon
schedule-time-icon
translate-icon
codeblock-icon
checkbox-rocket-icon
checkbox-arrow-right-icon
folder-rocket-icon
folder-arrow-right-icon
warning-filled-icon
scale-camera-icon
dashboards-icon
list-icon
calculator-refresh-icon
folder-minus-icon
folder-plus-icon
cloud-arrow-down-icon
cloud-arrow-up-icon
resize-width-icon
standard-width-size-icon
large-width-size-icon
fullscreen-width-size-icon
document-contact-icon
merge-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.
Whether to display the menu item.
Whether to lock the menu item. By default, "false."
CrtMenuItemViewElementConfig [ ] items 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.
See also
Overview of Freedom UI Designer and its elements (user documentation)
Set up Button components (user documentation)
