Skip to main content
Version: 8.1

Button component

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

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.