Button component
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
name string
Button name. Required to bind the button to a handler, access the model attributes, etc.
visible string
Button visibility.
color string
Button style. By default, default
.
Available values
default | Auxiliary white button. |
primary | Primary. Blue button. |
accent | Accent. Green button. |
warn | Warning. Red button. |
ariaLabel string
Button property mapped to the aria-label
button attribute. Uses the caption
property value by default.
caption string
Localizable button caption.
disabled boolean
Flag that locks the button. By default, false
(unlocked).
disableRipple boolean
Property that disables the button animation on click. By default, false
(animation enabled).
textTransform string
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
.
Events
clicked boolean
Fires when a user clicks the button. Learn more in a separate article: Page customization.
Styles
disabled-button-background
Color of an inactive button.
button-border-radius
Button border radius.
Icon button
Icon button is an additional setting of a Button type component.
Properties
iconPosition ButtonIconPositionEnum
Position of the icon relative to the button caption. By default, only-text
.
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. |
caption string
Localizable schema caption displayed when holding the pointer over the button.
icon string
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 | |
close-button-icon | |
delete-button-icon | |
disk-warn-button-icon | |
document-button-icon | |
document-new-button-icon | |
email-button-icon | |
flag-button-icon | |
gear-button-icon | |
import-button-icon | |
lock-button-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 |
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
caption string
Localizable caption of the button menu item.
visible boolean
Flag that manages the menu item visibility.
disabled boolean
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 string
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 | |
close-button-icon | |
delete-button-icon | |
disk-warn-button-icon | |
document-button-icon | |
document-new-button-icon | |
email-button-icon | |
flag-button-icon | |
gear-button-icon | |
import-button-icon | |
lock-button-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 |
iconColor string
Hex code of an icon color.