Perspective - Button

Component Palette Icon:

Description

The Button component is a versatile component, that is used to initiate some sort of action in response to being pressed. It can be used for showing status, as well. For example, you can configure buttons to be active or inactive, change color, text or any other property, and you can alter these configurations in response to conditions in your project. Button components support icons as well. For an example, see Example 2 below.

To get buttons to do things, you configure one or more Actions that occur following an Event. For instance, you might call a script action on the onActionPerformed component event, which triggers when the button is pressed.

New in 8.1.2

The DateTime Picker component has two pre-configured variants: Primary and Secondary.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Name	Description	Property Type
text	Text to display on a button. New in 8.1.26 Text can also be entered directly on the button by deep selecting the component, which enables inline editing. Changes are immediately reflected in the text property field.	value: string
textStyle	Style properties that are directly applied to the text within the Button component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object
primary	Toggle between default primary and secondary button style. Default is true.	value: boolean
enabled	Enables button interaction. Default is true.	value: boolean
image	An optional image embedded in the button. source: The image source URL. It could be a URL to an image on the internet or Gateway, or even an embedded image. Value is string. For an image already in the Image Management console, use /system/images/{path to your image}. For example: /system/images/Builtin/icons/24/lightbulb_on.png icon: An image path used to augment the writingState of the component by placing an image next to it. path: Shorthand path to icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see https://fonts.google.com/icons?selected=Material+Icons. Value is string. color: Color of the icon. Can also assign color in "fill" of the style property. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. width: Width of the button image in pixels. Value is numeric. height: Height of the button image in pixels. Value is numeric. position: Horizontal position of the image within the button relative to the text: left, center, right, top, or bottom. Value is string. style: Sets a style for the image. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object
align	Aligns the text and image (if present) along the cross axis. Vertical if imagePosition is top or bottom, otherwise it's horizontal. Options are start, center, end, and stretch. Default is center.	value: string
justify	Justifies the text and image (if present) along the main axis. Horizontal if the imagePosition is top or bottom, otherwise it's vertical. Options are start, center, end, space-around, space-between, and space-evenly. Default is center.	value: string
style	Sets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object

Component Events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Examples

Example 1

Property	Value
props.text	Complete
props.image.source	/system/images/Builtin/icons/48/check2.png
props.image.position	right
props.textStyle.color	#000000
props.justify	space-evenly
props.style.backgroundColor	#D5D5D5
props.style.borderStyle	solid
props.style.borderColor	#000000
props.style.borderWidth	2px

Example 2

Property	Value
props.text	Save
props.textStyle.color	#00AC00
props.image.source	/system/images/Builtin/icons/48/disk_green.png
props.image.position	top
props.image.width	40
props.image.height	40
props.align	end
props.justify	space-between
props.style.backgroundColor	#FFFFFF
props.style.borderStyle	inset
props.style.borderWidth	5px
props.style.borderColor	#00AC00